响应式设计的基本理解

-2

因为炒作是响应式网页设计，我已经知道如何编写它，我只是在这里澄清我自己的一些问题，然后才继续做错事。响应式设计的基本理解

如果我们设置一个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，然后改变？

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

来源

2013-08-06 EasyBB

您的媒体查询中仍然需要选择器，即这些样式适用于哪些选择器？ – Tdelang

哦，哈哈我很抱歉是的，我知道这是我的不好。我只是想在睡觉前尽可能快地写下它。谢谢你的发现，但我的实际CSS确实有媒体查询 – EasyBB

我认为使用百分比值来保证金和宽度。你能避免调整问题

来源

2013-08-06 06:48:29 ParVathi

的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）媒体查询规则中的数值一样大，它们应用于两次（非必要）。

来源

2013-08-06 07:00:11 xec

好吧。所以它不是必需的。这正是我所期待的。因此，如果设置为较高的媒体查询，那么除非我们希望更改，否则我们不需要不断将其添加到较低的查询中。正确 – EasyBB

@EasyBB是的，正确的。 – xec

响应式设计的基本理解

回答

相关问题