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?