媒体查询断点像素规格

Question

我对媒体查询断点应该是什么感到困惑。我用来做它的方式是由具有比下破点少一个像素，例如

@media screen and (max-width: 749px) {} //Mobile design CSS applies to everything until 74ppx 
@media screen and (min-width: 750px) and (max-width: 969px) {} 

etc. 

但有些人使用的确切值，如

@media screen and (max-width: 750px) {} 
@media screen and (min-width: 750px) and (max-width: 970px) {} 

岂不第二种方法打破它？我的理解是第一种方法是要走的路。

什么样，如果你做的东西，如

@media screen and (max-width: 750px) {} 
@media screen and (max-width: 970px) {} 

而且我希望所有的手机设计，适用于750，但750是平板电脑视图的开始。相同的970.在这种情况下，它也会少一个像素是正确的？ I.e最大宽度：749和最大宽度：969

Answer 1

是的，第一个是正确的。在第二种情况下，如果屏幕宽度恰好为750px，则将应用两个媒体查询部分，这可能会导致问题。

关于你另外：

@media screen and (max-width: 750px) {} 
@media screen and (max-width: 970px) {} 

在这种情况下，在第二次查询的规则将覆盖那些在第一个相同的CSS选择器，这将很可能也会产生问题。

通常的方式可能是相反的方式（桌面第一种方法），或者使用移动优先方法，首先声明移动尺寸的一般规则，然后添加媒体查询以覆盖一般尺寸的较大尺寸规则。这将例如是

@media screen and (min-width: 720px) {} 
@media screen and (min-width: 1280px) {}