Html 了解媒体查询

因此，我试图让我的非响应性网站www.expanse.co.in响应，但无法使其在所有/大多数手机和屏幕尺寸上看起来相同。。根据我在网上搜索中了解到的情况，我为网站似乎出现问题的每个决议添加了媒体查询，但现在每当我添加另一个决议时，它似乎都会打破以前的决议。我如何使其对所有决议作出响应。？ 例如，我添加了一些媒体查询，但添加更多类似这样的媒体查询将打破以前的查询，所以有没有办法让它在所有分辨率上工作

/*iphone 6/7/8 */
        @media only screen 
          and (min-device-width: 375px) 
          and (max-device-width: 667px) 
          and (-webkit-min-device-pixel-ratio: 2)
          and (orientation: portrait) { 

              #bot {
                  margin-top: 500px;
                  height: 500px;
              }
              .subfield {
                  margin-top: 240%;
                  margin-left: 20%;
              }
              .iconBar {
                padding-top: 250%;
                margin-left: 22%;
            }
            #botText {
                margin-top: 150%;
                padding-left: 34%;
                font-size: 32px;
            }
            #botText2 {
                margin-top: 164%;
                font-size: 14px;
            }

            }
/*iphone 5/5c/5s/se */
        @media only screen 
              and (min-device-width: 320px) 
              and (max-device-width: 568px)
              and (-webkit-min-device-pixel-ratio: 2)
              and (orientation: portrait) {
                #bot {
                  margin-top: 500px;
                  height: 570px;
              }
              .subfield {
                  margin-top: 296%;
                  margin-left: 20%;
              }
              .iconBar {
                padding-top: 312%;
                margin-left: 20%;
            }
            #botText {
                margin-top: 170%;
                padding-left: 34%;
                font-size: 32px;
            }
            #botText2 {
                margin-top: 192%;
                font-size: 14px;
            }
            }

---

这将使

主体在宽度等于或大于768像素的任何屏幕上宽100像素

 @media (min-width: 768px) {
     body {
         width:100px;
    }
}

 @media (max-width: 768px) {
     body {
         width:100px;
    }
}

这将使
主体在宽度等于或小于768像素的任何屏幕上宽100像素

 @media (min-width: 768px) {
     body {
         width:100px;
    }
}

 @media (max-width: 768px) {
     body {
         width:100px;
    }
}

样式并非一刀切，而您在基本规则中处理样式的方式将决定创建正确的媒体查询的难度。为了帮助理解将使用什么屏幕，但作为一个整体，您应该尝试从一开始就让元素尽可能流畅

使用您选择的浏览器的开发工具来检查您的元素，甚至可以从Chrome的开发工具的下拉菜单中选择常用的屏幕尺寸


关于如何构造媒体查询和间隔断点，请注意，高度/宽度的断点非常接近，有时会产生不理想的效果

此外，首先确定方法将为您节省大量的麻烦。Mobile First将利用最小宽度从小到大进行设计，而Desktop First显然是相反的选择。在开始你的项目之前弄清楚这一点很好，但是你不一定要在项目的基础上永久地承诺其中一个。您可以通过思考您的观众在哪里最喜欢使用您的项目来决定。
通过使用（最小宽度）规则，从移动开始向上，或者使用（最大宽度）规则，以“移动优先”的方式让您的生活更美好。
不要把它们混在一起，因为这样会产生难以书写的逻辑。
考虑您喜欢的方法，然后应用它，不断更改视口宽度，并尝试在运行中操作代码，这对于响应性设计来说是不起作用的方法。
请添加您的媒体查询代码。我编辑并添加了媒体查询，这似乎有点离题，但我的问题是，添加更多这样的媒体查询将打破以前的查询，那么有没有办法让它在所有分辨率上都工作？是的，谢谢你，我一直在使用chrome的开发工具来测试大小，但是通常添加一个媒体查询会破坏其他一些媒体查询，而且我尝试使用%而不是%使用像素值，这样它可以在每个分辨率下自动调整，但在一个分辨率或另一个分辨率下，或者在某些手机中可能在横向模式下，等等查看我在回答中链接的模板指南。这将有助于为您的特定风格开发自己的范围。我也在其中添加了一些额外的资源。如果有任何不清楚的地方，请告诉我！您的媒体查询解释错误，因为两种解释都忽略了包含的给定像素值。正确的是超过767像素或更大或等于768像素。@connexo是的，你完全正确。我将在中编辑此内容。是的，我意识到在开始开发之前使用一种方法会更好。然而，尽管我仅尝试转换一种无响应的方法几乎是不可能的，但似乎不破坏某些分辨率或手机？