Support rem units

[madeleineostoja]

Will have to check what font-size declared on html (if any, default to 16px), then calculate all rem values before mixing them into responsive declaration.

Mixing up px and rem units will be a pain (eg: rem font sizes and px media queries).

[rarila]

Hi, did some math and got the following (sass) result:

    $mult: strip-unit($font-max - $font-min) / strip-unit($width-max - $width-min);
    font-size: calc(#{$font-min - $width-min * $mult} + #{$mult * 100}vw) ;

This not only results in a much nicer calc() function, it also works without calculations with all units, as long as the units of the font-sizes and the widths are the same.

Example output:

    font-size: calc(4.8px + 1.6vw)
    font-size: calc(.3rem + 1.6vw)
    font-size: calc(.3em + 1.6vw)

[madeleineostoja]

Ooh nice one. I'll look at porting this over to js when I get the chance (or would happily welcome a PR).

Haven't actually tested this myself yet but definitely looks more flexible w/ cleaner output. That said I don't think it really solves the rem issue. Breakpoints are almost unanimously given in px, and forcing rem for them would be unreasonable. But it should be fairly trivial to detect px + rem deceleration then fetch the base font size and convert the px portion to rem, to feed into this more generalised logic.

[rarila]

I would have PRed already but I'm a bit short of spare time at the moment. 😓

I'm still investigating on best units for media queries, what the advantages or disadvantages are. As for "unanimously given", I've seen both. For example Bootstrap uses px and Zurb Foundation uses em. And I haven't found one article sofar that tells you should use one and not the other.

After thinking a bit about it, the px/(r)em conversion of widths for the media queries is impossible anyway as it does not depend on what you set on html or :root, it's set in the browser at runtime. So my solution would probably be already helpful as one who uses (r)em in media queries probably also uses (r)em for font sizes.

So the correct and only possible way would be to convert the fontsizes to whatever units the widths have.

[madeleineostoja]

px/(r)em conversion of widths for the media queries is impossible anyway as it does not depend on what you set on html or :root, it's set in the browser at runtime.

Not entirely sure what you mean here. Browsers set a default root font size of 16px, and overriding this on the doc root (ie: html) changes the base for rem units. Of course the user/browser can change this base, but that’s kinda the point. So px -> rem conversion would simply be a case of checking html and defaulting to 16px base. As long as your rem units are equal in scale, whatever the root changes to at runtime doesn’t matter. And I’d always favour converting to the unit used on font-size rather than range, since that’s what this plugin aims to set.

In any case, when I get a chance I’ll check out and port your new sizing logic, and since that will add basic rem support, I’ll just open a new ticket for mixed units. Again, should be fairly trivial to implement, I’m just strapped for time atm.

[rarila]

What I mean is, that the relative units in media queries are based on the initial values (set by the browser) no matter what you set an doc root. See spec:

Relative 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’.

A unit conversion of width values pre runtime seems to be rather impossible for me. So the only way would be adjusting the font size units to what ever the width unit is.

[madeleineostoja]

oh right, didn't realise that. After a bit of digging, it seems rem mq's are useless at best (http://fvsch.com/code/bugs/rem-mediaquery/) and flat out don't work at worst (https://bugs.webkit.org/show_bug.cgi?id=78295).

And as you point out, em media queries are based off the parent initial value, which is the browser/root, which = 16px across the board. The user changing zoom level changes this base, which handily also changes the base of rem units.

So, a few different use-cases:

1. px font-size + px font-range. Do nothing, will work fine.

2. em font-size + em font-range. Do nothing, will work fine.

3. rem font-size + rem font-range. Do nothing, will work on modern browsers (?).

4. rem font-size + px font-range. Convert px values in font-range to rem for calc expression, but keep the px values for the breakpoint media queries.

5. rem font-size + em font-range. Convert em font-range to rem using a 16px base for the calc expression, but keep em values for the breakpoint media queries. Results in 'rem-like' breakpoints (em), and baserate rem for font-size (ie: done off 16px regardless of doc root decls).

I think that covers just about everything. There might be a few edge cases here and there, but generally that logic sounds fairly solid to me.

[rarila]

Ok, the link above was from 2012 and the bug was fixed at least 2,5 years ago so I don't see there a big problem. E.g. an up to date Chrome doesn't seem to have any problems with rem in mq's.

Anyway, as em is relative to the parent and there's no parent of root, rem and em should be absolutely identical in mq's, so the rem units could be simply replaced by em for the sake of possible very old browsers.

[madeleineostoja]

Really? I'm on the latest chrome and the rem mqs in that demo were way off. Also that bug was last updated in late 2014 and is still open.

Admittedly I didn't test any further than that, because using rem in mq's is pointless regardless, as it simply equates to em, which has more support.

[rarila]

Don't trust a test you didn't forged yourself.
The test is simply plain wrong and compares 🍎🍎 with 🍐🍐 :

  html   {font-size: 20px;}
  #red   {width: 50rem; background: #F00;}
  @media screen and (max-width:50rem) { html{background: #FAA;} }

I can't work as we know, the red bar is calculated with a 20px base and the mq with (probably) a 16px base. Set your Chrome base font size to 20px and the test works exactly as the author wants.

But as I said, simply s/rem/em/ in the mq just for older browser and good is.