Bootstrap 4 - 媒體查詢方法

Question

我是新來的html & CSS編程和非常喜歡它。

Bootstrap是一個生活的節省，清潔，簡單和一切。

我需要一些建議與媒體查詢

在自舉4，有2種選擇（移動第一或桌面第一）**指最小寬度和最大寬度

一些實驗後，我使用桌面第一，不是代碼享受移動

// Extra small devices (portrait phones, less than ???px) 
// No media query since this is the default in Bootstrap 

// Small devices (landscape phones, 34em and up) 
@media (min-width: 34em) { ... } 

// Medium devices (tablets, 48em and up) 
@media (min-width: 48em) { ... } 

// Large devices (desktops, 62em and up) 
@media (min-width: 62em) { ... } 

// Extra large devices (large desktops, 75em and up) 
@media (min-width: 75em) { ... } 

我相信這將側重於移動第一和比向上移動到桌面

這一個從桌面到移動

// Extra small devices (portrait phones, less than 34em) 
@media (max-width: 33.9em) { ... } 

// Small devices (landscape phones, less than 48em) 
@media (max-width: 47.9em) { ... } 

// Medium devices (tablets, less than 62em) 
@media (max-width: 61.9em) { ... } 

// Large devices (desktops, less than 75em) 
@media (max-width: 74.9em) { ... } 

// Extra large devices (large desktops) 
// No media query since the extra-large breakpoint has no upper bound on its width 

但我發現，桌面首先將覆蓋小型媒體查詢

@media (max-width: 74.9em) { body {background-color: pink;} } 
@media (max-width: 61.9em) { body {background-color: blue;} } 
@media (max-width: 47.9em) { body {background-color: green;} } 
@media (max-width: 33.9em) { body {background-color: red;} } 

body { 
    background-color: skyBlue; 
} 

正如我縮了下去，只顯示藍色的天空.. 但是如果我使用其他方式，這樣可以嗎？

/* global */ 
body { 
    background-color: skyBlue; 
} 

/* less than 75 */ 
@media (max-width: 74.9em) { body {background-color: pink;} } 


/* less than 62 */ 
@media (max-width: 61.9em) { body {background-color: blue;} } 

/* less than 48 */ 
@media (max-width: 47.9em) { body {background-color: green;} } 

/* less than 34 */ 
@media (max-width: 33.9em) { body {background-color: red;} } 

意義，我會比第一個碼的大屏幕一個接一個..到小型設備？..

Answer 1

我會比一個接一個第一碼大屏幕..到小設備

這正是最好的辦法，做到這一點。從大到小。

爲什麼？
由於所有小於34.00 em設備也小於75.00 em，所以總是最後一個將覆蓋所有內容。現在，當你逆轉這個順序時，它對你來說工作得很好。每個設備都將停止在其中一個查詢中，並且不會再繼續。

/* MORE THAN 75 */ 
body { background-color: skyBlue; } 

/* LESS THAN 75 */ 
@media (max-width: 74.9em) { body {background-color: pink;} } 

/* LESS THAN 62 */ 
@media (max-width: 61.9em) { body {background-color: blue;} } 

/* LESS THAN 48 */ 
@media (max-width: 47.9em) { body {background-color: green;} } 

/* LESS THAN 34 */ 
@media (max-width: 33.9em) { body {background-color: red;} }