Use "em" not "px" for @media queries

[niaccurshi]

Is your feature request related to a problem? Please describe.
Media queries that are output, for example for the .wp-block-column classes, should be written using "em" values not "px", the reason for this is that the use of pixel values can cause problems for visitors to a site that have their browser font size settings set to something that isn't 16px. A similar problem was highlighted in #16181 for a different scenario.

More information on this is well summarised, tested and explained here: PX, EM or REM Media Queries? - zellwk.com

Describe the solution you'd like
I don't know the way that CSS is compiled, but it feels like changing the pixel based values to ems should be achievable, and details are out there on ways to do this that don't require developers to stop using pixel values when precompiling. Px to Em Functions - css-tricks.com

Describe alternatives you've considered
I don't think there is an alternative solution here, using pixels in media queries is outdated and provides a lesser experience to visitors to websites that are actively using their browser settings to enhance their own accessibility experience.

[paaljoachim]

Hi @niaccurshi

Thank you for creating this issue!
A long time has passed.
Is this issue still valid?

@aristath Ari can you take a look? Thanks.

[Azragh]

In my opinion the best solution would be a setting / hook / filter in which a developer can choose the mobile breakpoint (currently 600px) and which unit to use - I do use pixels, but I'm not happy with the default of 600 for breaking columns.

[niaccurshi]

Yes this is still very much a valid issue. The best practice would be to use 'em' units though the most robust solution would absolutely be to create the means for developers to control this value as per @Azragh's comment above. However default values should be in 'em' units so as to have the best effect from an accessibility perspective.

[andersnoren]

I just wanted to note that changing this now would result in inconsistent experiences in themes that have replicated the Gutenberg media queries to, for example, change the column/gallery gutters at the 600px breakpoint (using pixel values). I do agree with @Azragh that themes should be able to modify those breakpoints (and the units they use) to better match the theme styles.

[niaccurshi]

It's a shame that sub-optimal practice could get baked in the way that @andersnoren says, though I do totally understand and agree with the point they make. Is there any way that Gutenberg in combination with a future WordPress could facilitate a change to the default while maintaining consistency for old/custom themes perhaps?

i.e. the setting of some kind of option to signify existing or legacy install that would continue to use legacy media query code unless opted in to the em based css, while versions created (rather than updated) after a certain point release get the media queries using best practice? I lack enough knowledge in how this may be incompatible with the process for updating and installing wordpress, and it would still rely on for-profit theme developers to maintain their code to update their themes for future installs of their theme (but I feel that with the right kind of notice that this should be an expectation of sorts for theme developers selling their themes on an ongoing basis?)

Ultimately a hook for changing the media query values is the best (and hopefully easiest?) solution for all theme development, even outside of the use case of accessibility through use of different units. However, from the accessibility point of view specifically, I strongly feel that showing the developer community that the actual default method of media query sizing should be em units would be the kind of thing WordPress and Gutenberg should be taking a lead on if we can find a way to do so gracefully.

[Azragh]

"Ultimately a hook for changing the media query values is the best (and hopefully easiest?) solution for all theme development". I absolutely agree.

For me (and for many other developers too I assume) this is one of the basic features I have been waiting for since Gutenberg was released. I don't understand why such basic things haven't been addressed for years and development is already focused on full site editing, when there are still thousands of bugs and feature requests in the normal editor. Just like the lack of ability to remove inline font sizes in the editor or define them in em's (mentioned here and in an already closed one here) as well as the lack of implementation of the editor stylesheet in the new widgets screen (why not simply include my editor.css added with add_editor_style('')?) make it almost impossible to offer customers the promised editing experience without adjusting tons of code manually for every new one.

[Spleeding1]

Since everything is going to theme.json (and I am not well versed in it) is it possible to create a mobile-query-breakpoint setting that could be pulled and rendered? I am not sure how media queries work with theme.json, but absolutely there has to be a way to change it!

[Spleeding1]

How about this for an option? You can create your own media queries and name them. If you want to remove an existing query you put null after it.

{
	"version": 1,
	"settings": {
		"breakpoints": {
			"mobile": "screen and (max-width: 37.5em)",
			"tablet-only": "screen and (mix-width: 37.5em) and (max-width: 60em)",
			"remove-default-query": null,
			"units": ["px", "em", "rem"]
		},
		"blocks": {
			"core/button": {
				"spacing": {
					"padding": {
						"top": "0.3rem",
						"right": "1rem",
						"bottom": "0.3rem",
						"left": "1rem"
					}
				},
				"breakpoints": {
					"mobile": {
						"spacing": {
							"padding": {
								"right": "0.4rem",
								"left": "0.4rem"
							}
						}
					}
				}
			}
		}
	}
}

[coreyworrell]

Hard to believe this hasn't been addressed in almost 3 years. px media queries have been inaccessible for many years now. Our sites always use em media queries for the reasons @niaccurshi mentioned, and if want to change a style based on when columns wrap, we cannot use em at risk of styles being "out-of-sync" if a user has modified their default browser font size.