Skip to content

Mismatch between set $default-font-size and what the browsers are expecting #2

@taupecat

Description

@taupecat

Josh,

I tried the revised breakpoint code that you provided for the first time this weekend, and got some unexpected results. My default font size for this project is 13px, and thus the font-size on my HTML element is 81.25%. I wanted my first breakpoint to be at 600px, so the Sass as written computed the breakpoint to be 46.15385ems.

However, the browsers (Chrome and Firefox) interpreted 46.15385em value to be 738.46154px because they were using 16px as their default font size, not the 13px I expected. It turns out that I should have done "600px / 16px + em", which gives me a breakpoint of 37.5em, which worked perfectly.

It seems to boil down to this: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/#baseline-expectations

So I'm going to submit a pull request on my own project (can you do that?), and approve it if you concur with my findings.

Thanks.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions