search

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.79k stars 193 forks source link

Convert media queries from px to rem for better a11y #518

Closed geomydas closed 2 months ago

geomydas commented 2 months ago

Thats it.

argyleink commented 2 months ago

how are they better for a11y? I could see container queries with rem being better for a11y, but not media queries. user's preference font size doesn't change the device size?

geomydas commented 2 months ago

They indeed change! For example, if I have 2 media queries and one is set on 320px and one is set on 20rem, and I change my font size to 32px, the px one will activate first. I often increase my font size a lot in the settings.

For example, if I have my text size at 200% (32px) I want the layout to adjust. I don't want a desktop layout to remain with massive text.

argyleink commented 2 months ago

sure, just as you can use (and I often do this) the ch unit for a media query.

sounds to me like perhaps this proposal is less about changing all the existing px media queries, rather adding a new set of media queries that are relative units based?

geomydas commented 2 months ago

this proposal is not to add more media queries, but change the unit of the current media queries into rem from px

argyleink commented 2 months ago

ah ok, well then i'm going to close. imo the media queries you prefer to use aren't screen based, their based on the users font size preferences, and to me that's an entirely different query. both are valuable and have their use cases. one looks inward to the content, and the other is absolute and looks at the device size. one is considerate to font size preference implications, one is considerate to a users device size. I don't believe you could replace all device queries with font size preference relevant queries. they're both accessibility considerations, and both have use cases.