媒體查詢斷點像素規格

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) {}