Skip to content

Always use 1rem = 16px for pixel equivalents in media queries #1190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 12, 2025

Conversation

thecrypticace
Copy link
Contributor

@thecrypticace thecrypticace commented Feb 11, 2025

Fixes #1189

From the CSS spec:

Relative length units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.

We should hide these because 1rem everywhere else will be one value but 1rem in a media query might still be 16px (it's not changeable by websites — only browsers / users)

@thecrypticace thecrypticace marked this pull request as ready for review February 11, 2025 19:31
// initial value of font-size as provided by the browser. This is defaults to 16px universally
// so we'll show them *if* the root font size is 16px otherwise we'd be showing potentially
// incorrect values.
if (rootFontSize !== 16) return query
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we instead always set it to 16 for media queries? As in, don't accept a rootFontSize in the function and hardcode it to 16

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah you know… maybe

@thecrypticace thecrypticace changed the title Hide pixel equivalents in media queries when rootFontSize is not 16px Always use 1rem = 16px for pixel equivalents in media queries Feb 11, 2025
@thecrypticace thecrypticace merged commit c35991b into main Feb 12, 2025
@thecrypticace thecrypticace deleted the feat/media-query-not-16px branch February 12, 2025 12:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Pixel equivalents are wrong in media queries when rootFontSize is not 16px
3 participants