Could Chrome be miscalculating em unit values in media queries?

Question

Could Chrome be miscalculating em unit values in media queries?

I have defined my media query breakpoints as shown below:

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

After using a PX to EM calculator to get the 48.063em value (as I was advised to use em-units), I noticed that while it works fine in Firefox, Chrome seems to have an issue. The browser width of 769px falls in between the defined max-width and min-width values, causing neither to be applied. I know I can resolve this by adjusting the min-width to 48.01em. However, I have seen tutorials using 48.063em as well.

Could someone please confirm whether this is a bug in Chrome or a flaw in my approach?

css google-chrome responsive-design media-queries

Answer 1

Answer №1

I encountered the same issue and I believe you are right in assuming that your width is falling between the specified values, causing neither style to be applied. My suggestion is to eliminate the phone media query and include the phone styles at the top level instead, like this:

/* phone styles */

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

By doing this, your phone styles will be implemented unless the width reaches 48.063em or higher, at which point the phone styles will be overridden by similar ones in the media query (following a mobile-first design approach). This approach simplifies the cutoff point. You could also apply this concept to larger devices as well:

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

When examining the CSS for Foundation, you'll notice this methodology, which assisted me in resolving the issue. As to why the original code functions on browsers other than Chrome, I cannot say.

Answer 2

I encountered the same issue and I believe you are right in assuming that your width is falling between the specified values, causing neither style to be applied. My suggestion is to eliminate the phone media query and include the phone styles at the top level instead, like this:

/* phone styles */

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

By doing this, your phone styles will be implemented unless the width reaches 48.063em or higher, at which point the phone styles will be overridden by similar ones in the media query (following a mobile-first design approach). This approach simplifies the cutoff point. You could also apply this concept to larger devices as well:

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

When examining the CSS for Foundation, you'll notice this methodology, which assisted me in resolving the issue. As to why the original code functions on browsers other than Chrome, I cannot say.

Could Chrome be miscalculating em unit values in media queries?

Answer №1

Similar questions

My Drop Down menu is not displaying the <a> in two lines, and I'm having trouble getting it to show correctly

Choosing <label> elements, while disregarding those <label> elements that include <input>

Steps to halt webkit animation within a div located inside a circle:

Angular routes cause a glitch in the Bootstrap navbar, causing it to shift to the left on certain active

Clicking on a href link inside a scrollable div-container causes it to malfunction, causing the page to jump

What is the best way to determine when an object is not clickable?

Issue with Bootstrap 5: Mobile Menu Failure to Expand

What is the best way to vertically align a Material UI component to occupy the remaining space within a container

How to position radio buttons in line with labels containing inline inputs using Vue and Bootstrap

What is the best way to horizontally align an element within a Material UI Grid item?

Content within the p tag is failing to wrap onto separate lines

<container> rectangular form

Setting the width of colspan elements can be challenging when other columns have dynamic widths

I'm looking to customize the text displayed on the screen from my JSON file. Is there a way to hide this text?

The automated test locator in Angular using Protractor is failing to function

Changing the size of the logo as you scroll through the page

What is the best way to make the child Div float to the bottom of the parent Div?

How can I achieve a full-width stepper in Bootstrap?

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

Tips for testing the website's color modifications?