CSS媒體查詢相互覆蓋

Question

感謝Stack Overflow提供幫助。 我有一些自定義css我用來收緊設計。 我一直在遇到這個問題，如果我在一個媒體查詢中改變了某些內容，那么對於iphone 6來說，那個改變會影響另一個設備，比如iphone 5.它變成了這個問題，我不斷調整，看不到任何目的。 這是我正在使用的@media斷點。

/* IPHONE 6 PLUS */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 

}

/* IPHONE 6 */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
and (orientation : portrait) { 

}
/* IPHONE 5s */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {

}

/* IPAD LAYOUTS */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
     } 


/* IPAD LANDSCAPE */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

任何幫助都會得到很大的幫助。

Answer 1

我同意Birdman，你應該考慮移動第一種方法。 但是，移動優先意味着最小的設備大小完全在任何媒體查詢之外。 下一個大小將啟動第一個媒體查詢。 您只需要一個最小寬度，因為這些新樣式將是基本樣式的補充，而不是覆蓋它們。 創建的每個媒體查詢將繼續與已調用的媒體查詢組合。

而不是擔心iPad，或平板電腦...擔心你的設計元素何時開始變壞。 所有主流瀏覽器都具有足夠智能的仿真器，可以測試不同的設備尺寸。

這是一篇關於利弊的好文章。 我總是首先編寫移動代碼，從不擔心樣式碰撞，除非我故意這樣做:)

https://codemyviews.com/blog/mobilefirst

Answer 2

當設備寬度介於媒體查詢范圍之間時，將應用樣式。 因此，如果設備的寬度為500px，它將首先具有6plus樣式，然后將被6的樣式覆蓋，然后是5s'。 通常情況下，不建議嘗試為特定設備定制CSS，但如果您願意，則需要確保沒有任何范圍重疊，或者它們只會被最后一個樣式覆蓋。