Should I use px or em for media query breakpoints?

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

Answer 2

Yep, u shall use EM for media query breakpoints.