Skip to content

Change em's unit interval from 0.1 to 0.0625. This is because some de…#193

Open
diegopelaezie wants to merge 1 commit intoeduardoboucas:masterfrom
diegopelaezie:update-em-unit-interval
Open

Change em's unit interval from 0.1 to 0.0625. This is because some de…#193
diegopelaezie wants to merge 1 commit intoeduardoboucas:masterfrom
diegopelaezie:update-em-unit-interval

Conversation

@diegopelaezie
Copy link
Copy Markdown

Some devices like old iPads and iPad mini don't validate the breakpoints in ems correctly.

Hi guys,

I found this issue in a current project so I overwrote the $unit-intervals variable in my project. But I feel this might be something you guys will want to look at and maybe update.

When using pixels a '>tablet' is compiled as '>769px'.

In ems, (768 / 16 = 48em) '>tablet' is complied as '>48.01em'. But 48.01em in pixels is 768.16px and not 769px. This is having in mind the default browser font size of 16px and html of 62.5% (10px).

The right value in ems should be '>48.0625em' which then converts to the expected value. This applies to any other em value so the interval should be 0.0625.

Any thoughts?

…vices like old iPads and iPad mini don't validate the ems correclty.

When using pixels, '>tablet' is converted to '>769px'. In ems, (768 / 16 = 48em) '>tablet' is converted to '>48.01em' but 48.01em in pixels is 768.16px and not 769px. The right value in ems is '>48.0625em' which then converts to the expected value.
@robsonsobral
Copy link
Copy Markdown

The title is wrong. It doesn't make sense. It should be "0.01 to 0.0625".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants