Skip to content

v4 - Change media query breakpoint units from em to px #17366

@niutech

Description

@niutech

Bootstrap 4 uses em units when setting breakpoints in media queries, which is inconsintent with screen sizes mesured in px and adds unnecessary complexity when converting from px to em. Does @media (min-width: 48em) {} equal well-known 768px? It is hard to tell from the first sight.
Therefore I am asking to bring back the old pixel units in media query breakpoints, unless there is an important reason not to do so. The old bug with zooming in was fixed long time ago.

Even @mdo (project owner) said:

Nope, no em units. They complicate simple values and scales unnecessarily and for little reward. Pixels are fine as browsers just zoom the page without any problem.

and:

Pixels provide absolute control and consistent rendering across every browser.
Designers still mostly think and operate in pixels.
Browsers scale up entire pages these days, so it's not an issue with type scaling or anything.
(...)
In the future, we'll likely use ems for type sizing, perhaps rems even, but not for anything else. This is also debatable on font sizes for inputs and the like. It's just not how folks build pixel perfect sites.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions