Question

所以我试图使我的非响应式网站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;
            }
            }

Answer 1

这将使您的body宽度在等于或大于大于768像素的任何屏幕上宽100像素。

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

这将使您的body宽度在 EQUAL OR LESSER （相等或较小）比768像素宽的任何屏幕上宽100像素。

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

并非所有尺寸都适合样式，并且您如何在基本规则中处理样式将决定创建适当的媒体查询的难度。 You can use templates可以帮助您了解将使用哪些屏幕，但总体而言，您应该从一开始就尝试使您的元素尽可能流畅。

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

appendTo puts together a decent guide关于如何构造媒体查询和分隔断点，请注意，高度/宽度的断点如此紧密地结合在一起有时会产生不良效果。

同样，首先确定您的方法将为您节省很多麻烦。 Mobile First or Desktop First。 Mobile First 将利用最小宽度从小到大进行设计，而 Desktop First 显然是相反的。在开始您的项目之前先弄清楚这一点是很好的，但是您不必只在项目的基础上永久地致力于一个或另一个。您可以通过考虑观众最会使用项目的地方来决定。

Answer 2

使用“最小移动量”规则，从“移动优先”到“移动优先”规则，或者通过使用“最大宽度”规则反之，以“移动优先”的方式改善生活。不要将它们混合在一起，因为这会产生难以编写的逻辑。考虑一下您喜欢的方法，然后应用它，不断更改视口宽度，并尝试随时随地操纵代码，这是响应式设计的无效方法。

了解媒体查询

2 个答案: