[mediaqueries] Account for minimum font size in relative length media queries

[leefloyd]

When a browser has a minimum font-size that is larger than the default font-size, the initial font-size used in media queries is relative to the smaller value. For a site that has been coded to scale with relative lengths, this can cause many layout issues as breakpoints no longer align with what has effectively become relative size of the content. Relative units in declarations are affected by minimum font-size, but media queries are not affected.

In the context of this following statement, I think the initial value of the font size should be defined as the greater of the user-specified sizes—either default or minimum font-size.
"Relative length units in media queries are based on the initial value, which means that units are never based on results of declarations."

https://www.w3.org/TR/mediaqueries-5/#units

[frivoal]

I agree with you. As long as browsers are not implementing the minimum font-size via some property (applied in the UA stylesheet), then there shouldn't be any technical reason why doing what you suggest should be unfeasible.

[lilles]

Minimum font-size does not affect em/rem lengths in computed values on elements. Blink aligned with Firefox for M79 fixing 308862. The reason for fixing it was that a minimum font-size would break a lot of real-world layouts. We discovered that when there was a bug which accidentally wrote a minimum font-size of 6px from the settings UI and we got many reports about it.

The typical failing sites would set the font-size on the html element to a size lower than the minimum font-size expecting rem units for other elements to not be affected by the minimum font-size.

So, I don't think the statement about relative units in the first comment is accurate. At least not for Chrome or Firefox. The width and height of this box is 100px regardless of minimum font-size:

[leefloyd]

With typical browser defaults, this box would be 100px wide.
If I change my default font size to 24px, the box will be 150px wide.
If I leave my default font size at 16px but change my minimum font size to 24px, the box will remain 100px wide. Thus, text content inside the box will be enlarged but the box will remain the same size. Media queries cannot be used to detect/correct this scenario since they will still be relative to the 16px default font size as well.

This text should fit comfortably inside

[css-meeting-bot]

The CSS Working Group just discussed [mediaqueries] Account for minimum font size in relative length media queries, and agreed to the following:

• RESOLVED: Have the MQ resolve their em against the actual default size which includes minimum.

The full IRC log of that discussion

Topic: [mediaqueries] Account for minimum font size in relative length media queries
github: https://github.com//issues/5858
florian: You can use font based units in MQ. Is viewport at least 12em. If you changed default font size in browser this is the size that will be taken into account. If you do it using your own CSS it's ignored.
florian: However, undefined if it takes min font size. If you make min > default should MQ calc on default or min? Having MQ being inconsistent with layout makes them unreliable. But it's tricky
q+
florian: As rune pointed out in issue we're kind of doing weird things with them. The em and rem length units are not effected by min font size. If you increase font is bigger but things measured is not.
q-
ack smfr
florian: Appears we have to lie in one way or another. If people do MQ in font units to measure text taking min size seems good. But if trying to check against something measured in font units it wouldn't be.
florian: I don't know what would be better, but good to define.
florian: I think all browsers do not take min into account. We had somebody complaining b/c that wasn't convenient
TabAtkins: The use cases rune talked about are things like people setting root font size to 10px so they can use em as a big pixel unit. That is a little different then doing this with root font size
TabAtkins: I don't think the reasoning for lying in normal ems applies here. Might be good to do for consistency, but use case if different enough that telling truth about text size can be worthwhile here
fantasai: I agree with TabAtkins. Use cases for font relative units is about how much text can I fit, can I do 2 col of content. That's largely based on size of text. em here should reflect font size
florian: Happy with that. Is anyone not or is rune on?
rune: I'm fine with that. Reason why I pointed out is the original reporter said something about consistency and this wouldn't be. There is no consistency argument. I don't have objections against resolving to take min font size into account
florian: Sounds like consensus
regrets+
astearns: Prop: MQ will take the larger of font size or min font size
TabAtkins: Have the MQ resolve their em against the actual default size which includes minimum.
astearns: Objections to TabAtkins wording?
RESOLVED: Have the MQ resolve their em against the actual default size which includes minimum.

[leefloyd]

I like that wording! Thanks all!