Skip to content

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

4 participants