Bootstrap 4 - Media Queries Approach

Question

Sono nuovo in html & Programmazione CSS e ci divertiamo molto.

Bootstrap è un risparmiatore di vita, pulito, facile e < 3 tutto.

ho bisogno di un consiglio con i media interroga

In Bootstrap 4, ci sono 2 scelte (primo cellulare o del desktop prima) ** riferendosi al min-width e max-width

Dopo qualche esperimento, ho goduto utilizzando il desktop prima e di codificare il cellulare

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

presumo che questo si concentrerà sulla prima mobile e di passare al desktop

e questo dal desktop al mobile

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

Ma ho scoperto che il desktop prima sovrascriverà la piccola Media Queries

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

Come rifuggo verso il basso, si mostrano solo l'azzurro del cielo .. ma va bene se uso il contrario?

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

Significato, io codificare il grande schermo prima di un-by uno .. al piccolo dispositivo? ..

Answer 1

io codificare il grande schermo prima di un-a uno .. al piccolo dispositivo

Questo è esattamente il modo migliore, per farlo. Dal più grande al più piccolo.

Perché?
Poiché tutti i dispositivi inferiori a 34,00 em sono anche inferiori a 75,00 em, quindi sempre l'ultimo sovrascriverà tutto. Ora, quando inverti questo ordine, funzionerà bene per te. Ogni dispositivo verrà fermato a una di queste query e non andrà oltre.

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