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;
          }
     }

如果我们设置边距或任何样式对于更大的宽度或最小宽度都是相同的问题，我们会继续分配它吗？我们可以将它留在那吗？因此，如果我们将保证金设置为20px 5px，那么它将保持到1200px？反过来它会保持不变直到达到360px然后改变？

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

Answer 1

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

相比之下：

@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

我认为将百分比值用于保证金和宽度。您可以避免调整大小问题

响应设计基本了解

2 个答案: