css - 响应式设计的基本理解

Question

由于炒作是响应式网页设计，而且我已经知道如何编写它，所以我只是在这里澄清一些我自己的问题，然后再继续做错事。

如果我们像这样设置一个 div 样式：

div {
   width:200px;
   height:200px;
   background: #000;
   margin: 10px 5px;
    } 

现在以我们想要的方式做出响应，我们会做 -

div {
   background:#000
    }
 @media screen and(max-width:1200px) {
    div {
      width:300px;
      height:300px;
      margin: 20px 5px;//Question is here
        }
     }
 @media screen and(max-width:720px) {
     div {
    width:300px;
    height:300px;
    margin: 20px 5px;//question is here
         }
     }

 @media screen and(max-width:360px) {
      div {
    width:200px;
    height:200px;
    margin: 10px 5px;
          }
     }

问题是，如果我们为更大的宽度或最小宽度设置边距或任何相同的样式，我们是否继续分配它，我们可以保留它吗？因此，如果我们将边距设置为 20 像素，那么 5 像素会一直保持到 1200 像素吗？反向也是如此，它会保持不变直到它达到 360 像素然后改变吗？

这只是一个一直困扰着我的问题。

Answer 1

媒体查询将max-width:1200px适用于以下所有尺寸，这意味着您无需再次在720px其中重新应用相同的值。

相比下：

@media screen and (max-width:1200px) {
    /* applies to all viewports below 1201px */
}

@media screen (min-width:721px) and (max-width:1200px) {
    /* only applies to viewports above 720px and below 1201px */
}

总之，由于您的第二个 ( 720px) 媒体查询规则中的值与较大的值相同，因此它们被应用了两次（不是必需的）。

Answer 2

我认为使用百分比值来表示边距和宽度。您可以避免调整大小问题