Is Chrome rounding media query em unit wrong?

Question

I set the media request breakpoints as follows:

@media screen and (max-width:48em){
    /* phone */
}
@media screen and (min-width:48.063em){
    /* tablet*/
}

I got the value 48.063em from some PX calculator in EM (for some reason I was told to use em-units, but this does not apply to this question) and it works fine in firefox, but in chrome it seems that the browser width of 769px drops BETWEEN those max-width / min-width values, and none of them apply to the page. I know this can be fixed by setting that min-width to 48.01em, don't worry about that. I have seen 48.063em also in some tutorials.

Can someone confirm if this is an error in chrome or an error in my logic?

Answer 1

I had this exact problem, and I think you're right that your width falls between the specified values, and therefore no style is applied. I think the solution is to remove the phone media request and just have the phone styles at the top level, for example:

/* phone styles */

@media screen and (min-width:48.063em){
    /* tablet styles */
}

In this case, the phone styles will be applied if the width is not equal to 48.063em or higher, in which case the phone styles will be overridden by the same ones in the media request (mobile first design). Thus, you have only one cutoff point. You can also expand this to larger devices in the same way:

@media screen and (min-width:100em){
    /* even larger styles */
}

CSS Foundation, , . , , , Chrome, .