Should I use px or em for media query breakpoints? | Sololearn: Learn to code for FREE!
+ 1

Should I use px or em for media query breakpoints?

28th Jul 2021, 11:09 AM
Kenedy Olisi
Kenedy Olisi - avatar
2 Answers
+ 1
Px is an absolute measurement and it should be used for media queries. Whereas em and rem are relative measurements, 1em or 1rem may be a large px or a small px, depending on the font size setting of the body (rem) or its parent (em). Although em and rem can set the desired font size and correct sizing and positioning, they should not be used to set the absolute size of a media query. Refer to the Bootstrap CSS framework, which uses px units for media queries, as shown below. // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // X-Large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } // XX-Large devices (larger desktops, 1400px and up) @media (min-width: 1400px) { ... }
16th Jun 2022, 11:10 PM
Calviղ - avatar
Yep, u shall use EM for media query breakpoints.
28th Jul 2021, 11:23 AM
Aleksei Radchenkov
Aleksei Radchenkov - avatar