Bootstrap 4 - Media Queries Approach

Question

I need some advice with media queries

In Bootstrap 4, there are 2 choices (mobile first or desktop first) **referring to min-width and max-width

After some experiments, I enjoyed using the desktop first and then code for mobile

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

I presume this will focus on mobile first and then move up to the desktop

and this one from desktop to 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

But I found out that the desktop first will override the small 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;
}

As I shrink it down, it only shows the sky blue... but is it okay if I do it the other way round?

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

Meaning, should I write a media query for large screens first and then one-by one for the smaller devices?

Answer 1

I will code the large screen first than one-by one.. to the small device

That is exactly the best way, to do this. From the bigger to the smaller.

Why?
Because all lesser than 34.00 em devices are also lesser than 75.00 em, so always the last one would override everything. Now when you reverse this order, it will work just fine for you. Every device will be stopped at one of these queries and won't go further.

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