Bootstrap 4 - Phương pháp truy vấn phương tiện truyền thông

Question

Tôi mới dùng html & Lập trình CSS và Khá thích nó.

Bootstrap là trình tiết kiệm cuộc sống, Sạch sẽ, Dễ dàng và < 3 mọi thứ.

Tôi cần một số lời khuyên với phương tiện truyền thông truy vấn

Trong Bootstrap 4, có 2 lựa chọn (điện thoại di động đầu tiên hoặc máy tính để bàn đầu tiên) ** cập đến min-width và max-width

Sau một số thử nghiệm, tôi rất thích sử dụng máy tính để bàn đầu tiên và hơn mã điện thoại di động

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

tôi đoán này sẽ tập trung vào điện thoại di động đầu tiên và hơn di chuyển lên máy tính để bàn

và điều này từ máy tính đến điện thoại di động

// 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 

Nhưng tôi phát hiện ra rằng các máy tính để bàn đầu tiên sẽ ghi đè lên các phương tiện truyền thông nhỏ truy vấn

@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; 
} 

Như tôi thu nhỏ nó xuống, nó chỉ hiển thị trên bầu trời xanh .. nhưng có ổn không nếu tôi sử dụng vòng khác?

/* 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;} } 

Ý nghĩa, tôi sẽ mã hóa các màn hình lớn đầu tiên hơn một phần bởi một .. cho các thiết bị nhỏ? ..

Answer 1

tôi sẽ mã hóa các màn hình lớn đầu tiên hơn một phần bởi một .. với thiết bị nhỏ

Đó chính xác là cách tốt nhất để thực hiện việc này. Từ lớn hơn đến nhỏ hơn.

Tại sao?
Vì tất cả nhỏ hơn 34,00 thiết bị em cũng ít hơn 75,00 em, vì vậy luôn luôn thiết bị cuối cùng sẽ ghi đè mọi thứ. Bây giờ khi bạn đảo ngược thứ tự này, nó sẽ làm việc tốt cho bạn. Mọi thiết bị sẽ bị dừng lại tại một trong các truy vấn này và sẽ không đi xa hơn.

/* 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;} }