Transitioning to EM-Based Media Queries

After the recent resolution of the WebKit page-zoom bug, what are the primary benefits of utilizing em-based media queries over pixel-based ones?

Incentive

I am offering a reward for my question as many prominent CSS frameworks and web developers use em-based media queries, indicating there must be valid reasons for doing so.

The only advantage I know of is that if a user adjusts the default font size in their browser, content will adjust similarly to the problem fixed by the page-zoom fix. Is there data showing people tend to change the default size rather than zoom?

Please Note

To streamline my question, I eliminated two peripheral aspects. The original post provides context for @nwalton's excellent response, which covered all three points I raised.

cssresponsive-designmedia-queries

Answer №1

  1. When it comes to em-based and pixel-based media queries in modern browsers, the difference should be minimal as long as the browser handles zoom correctly. While there may have been issues with em-based queries due to changes in base font size, pixels are generally a safer choice. Update below. Despite this, base font size can still impact functionality.

  2. One potential problem with using the 62.5% technique and rem is compatibility with older browsers. To ensure a fallback for less-capable browsers, setting rem for modern ones could be a solution.

    html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; }
h1   { font-size: 24px; font-size: 2.4rem; }

  3. The speed at which browsers process px vs em is negligible since CSS calculations occur quickly. Therefore, there's little need to worry about differences in processing times between the two units.

Comparison of Measurement Units

px

Using px for media queries has been a reliable choice in the past due to its consistency and ability to zoom effectively. Update: However, changes in user default style sheets can disrupt media queries reliant on px.

  • Not affected by CSS cascade
  • Primarily absolute measurement (dependent on how browsers measure font pixels)
  • Easily zoomed in all modern browsers

em

Ems offer flexibility when creating grids and measurements. With ems, resizing containers and contents proportionally in media queries with one declaration is possible.

  • Responsive to CSS cascade
  • Relative to container font size
  • Zoombale in all modern browsers

In this instance, resizing fonts also adjusts container sizes proportionally.

h1.title {
  font-size: 2em;
  width: 20em;
  background-color: #baff1e;
}

@media (min-width: 400px) {
  h1 {
    font-size: 2.5em
  }
}

rem

While not extensively used by me personally, many prefer rem for its relative unit capabilities without as much complexity from the CSS cascade. Sizing elements based on the browser's base font size aligns with web standards and accommodates variations in optimal font sizes among browsers.

  • Not influenced by CSS cascade
  • Relative to base font size
  • Easily zoomable in all modern browsers

Regarding the 62.5% Technique

This longstanding practice appears to have no significant downsides currently. An article from A List Apart back in 2007 showed more reliable font displays across browsers with a base font set at 100% and text sized in em. Contemporary constraints likely make these considerations outdated. Personally, I am hesitant about setting my base font size to 10px, but that's subjective.

Update

Having conducted tests, I now advocate for using em over pixels for media queries:

  1. Changes in user base font size do occur. Threads on Mozilla's support network with thousands of views indicate some users adjust their default font sizes. Supporting these variations seems beneficial.

  2. Ems provide better future adaptability, catering to devices with non-16px optimal default font sizes.

  3. An interactive demonstration was compelling in influencing my preference towards em. Changing default font sizes in browser settings significantly impacts layout accuracy. This level of inconsistency is unsatisfactory.

Answer №2

Although I haven't come across any specific data regarding users who change their base font size, my research led me to websites created by experienced designers. I focused on whether they used px or em for their media queries. While this may not fully answer the question, it adds an intriguing aspect to the conversation.

Notable Figures

This is not an exhaustive list, but rather a compilation of individuals and groups who have had a significant impact on web development and responsive design practices.

  • Filament Group: em
  • Luke Wroblewski: em
  • Jeffrey Zeldman: px
  • Chris Coyier: em
  • Ethan Marcotte (aka The Father of Responsive Web Design): px
  • Jason Santa Maria: px
  • Mark Boulton: px
  • Nicholas Gallagher: px

An interesting observation is that Nicholas Gallagher, known for adding the media query line to the HTML5 Boilerplate CSS, uses em in that code, but opts for px on his personal website. Unfortunately, I couldn't find any discussions related to that commit.

Showcase Sites

While the following list may seem random, these sites are worth exploring as they have been developed either partially or entirely by individuals from the aforementioned list.

A notable detail about HTML5 Boilerplate is that its main project's CSS utilizes em, whereas the mobile version adopts px.

Leading Websites

Interestingly, few of the most popular websites globally incorporate media queries. Here are some exceptions:

Final Thoughts

Overall, the debate remains inconclusive.

It appears that both methods yield successful results, with no clear consensus on best practices.

There seems to be a shift towards em among forward-thinking designers, although concrete data is lacking. It's possible that some of the mentioned sites are older and haven't been updated to embrace em-based media queries. Obtaining sufficient data to make a definitive conclusion is challenging.

Nevertheless, the fact that major websites still utilize px suggests that this approach remains technically viable. If there were significant issues, larger sites would likely have addressed them based on user feedback and testing to better serve their audience.

Answer №3

One of the key reasons to implement EM based media queries is to ensure that your website respects the user's chosen font size without compromising the layout.

Avoid setting font-sizes in pixels to give users control over their viewing experience on your site.

This approach prioritizes accessibility and accommodates users who may have adjusted their (base) font size preferences.

Using relative units like EMs prevents layout issues when users customize their font sizes or use browser zoom functions, particularly on mobile devices.

The "62.5% technique" allows for easy implementation of relative font sizes while maintaining accessibility.

By utilizing REM units instead of pixels, you can ensure that your design remains responsive regardless of the user's font settings.

It's important to use min|max-width media queries instead of device-width to create breakpoints based on content rather than device resolutions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generate individual CSS files using postcss and rollup

When I import each css file in my JavaScript, I want it to generate a new css file for the build. For example: import "./app.css"; import "./admin.css"; This would result in creating dist/app.css and dist/admin.css. My configuration fi ...

cssbuildrollupjspostcss

Forming triangles with outlines

Recently, I had the challenge of designing speech bubbles and found a clever technique to create the triangular tip at the end using CSS. By setting the element's width and height to 0 and playing around with borders, you can achieve diagonal shapes f ...

css

When implementing ngIf conditions within a nested loop of the side menu in Angular 6, the collapse/expand CSS function does not seem to be functioning

this code dynamically binds a nested loop in the sidebar <ul class="nav metismenu" id="side-menu" *ngIf="concatMenulist?.length > 0"> <li *ngFor="let menu1 of concatMenulist"> <!--level 01--> ...

cssangularnested-loops

"Customize Bootstrap layout to have a stable width for desktop screens and a flexible width for

I received a psd design with a background for html5-bootstrap development that needed to be responsive. The original psd had a width of over 1200px, with the main container around 900px wide and the background displaying correctly. When converting to HTML ...

csshtmltwitter-bootstrapresponsive-design

How to perfectly align squares in CSS Grid

I'm working on arranging four squares in a grid pattern, two on top and two on the bottom, with equal spacing between them. Currently, the squares shift based on the fr value in CSS grid, resulting in uneven spacing like this: I want to align all fou ...

htmlcsscss-gridcentering

What is the contrast between specifying a MIME type and omitting it?

If I were to write a stylesheet in an HTML document, it's worth noting that since the introduction of HTML5, the type attribute is no longer necessary as text/css has become the default and only possible value: <style type='text/css'> ...

htmlcssmime-typesmedia-type

Tips for accessing images in Angular 24 lazy loaded modules

I have a collection of images that need to be shared throughout my application. There are 2 lazy-loaded modules - Login and Overview. The image I require is located in src/assets/images/logo.png and needs to be accessible in both the Login and Overview com ...

imagecssangular

Struggling to get the font-weights of the Typography and Button components in the new React with Material-UI to display

In both my previous and most recent React applications, I have the following code snippets: <Typography variant="h6" color="inherit" noWrap > h6. Heading </Typography> <Button type="button" size="large" color="primary" > ...

cssreactjsmaterial-uicreate-react-app

The sidebar's background is cut off before reaching the bottom when scrolling

I have been working on creating a sidebar that includes a background image with a transparent overlay. However, I encountered an issue where the overlay background does not stretch all the way to the bottom when the scroll bar becomes visible. Despite sett ...

htmlcss

Clickable regions in Internet Explorer 7 that lack a specific width

Is there a way to make the clickable area of links always stretch to the parents container when the parent container does not have a fixed width? For example, check out this JSFiddle. In Firefox, the link stretches with the text and the li tag, but in IE ...

htmlcssinternet-explorer-7

Tips for applying various CSS properties to a single element using styled-components

Is there a way to style similar elements differently using different CSS properties in styled components? For example: <div></div> <div></div> With the knowledge I have, I can do: export const StyledDiv = styled.div` color: red; ` ...

javascripthtmlcssreactjsstyled-components

Interactive Radial Menu Using Raphael JS

Greetings and thank you for taking the time to consider my predicament. I am currently working on creating an SVG menu using raphael, but unfortunately, geometry has never been my strong suit. Below is a visual representation of what I have managed to cre ...

jqueryhtmlcssnavigationraphael

Modify radio button colors upon selection with a variety of colors

Looking to create Yes/No buttons that start with a default state of null and change color when pressed - green for yes, red for no. Check out this example code: <label class="formheading">Apparatus group is correct</label> <fieldset data-r ...

javascriptjqueryhtmlcssjquery-mobile

Struggling to resolve a glitch in the mobile navigation that requires attention either through JavaScript or CSS coding

I'm having an issue with a mobile navigation menu I created. It's a simple hamburger icon that, when clicked, opens a fullscreen menu. The problem is that I want to prevent scrolling when the overlay is visible. I tried using this code: $(' ...

jquerycssmobilescrollnav

CSS Class Returns to Inactive State

One of my tasks involves adding a new class to an image. .bbbLink img { outline: 1px solid #ddd; border-top: 1px solid #fff; padding: 10px; background: #f0f0f0; } When hovering over the image, I apply the following styles, .bbbLink img ...

javascriptjqueryhtmlcss

Tips for consistently showing the addition symbol in my search bar

I created a code snippet that showcases a search box with CSS animations and jQuery toggling functionality. One issue I encountered is ensuring that the plus icon remains visible at all times, whether the search box is expanded or contracted. How can I ac ...

jqueryhtmlcsssearch

The xpath identifier in Selenium Python 2.7 for Chrome is dynamically changing with each instance

I have encountered another issue. I previously asked a similar question and tried the suggested method, but it did not work for this specific problem. The HTML code for this element is related to Filters. The main issue is that there is a toggle button th ...

pythoncssseleniumselenium-webdriverui-automation

Interact with HTML style attribute using JavaScript

Is there a way to retrieve a specific CSS property from the style attribute of an HTML element, without considering the stylesheet or computed properties? For example: <div style="float:right"></div> function fetchStyleValue(element, propert ...

javascriptjqueryhtmlcss

Having excessive space within an H1 heading

Having an issue with a PHP file on my test server that is displaying extra white space, which is highlighted by a red box. This whitespace is also shown in the developer tools view. When the file is outputted, all of the content appears on one line. Code: ...

csswhitespace

Tips for creating dynamic row styles in a fluid table layout?

Could someone help me figure this out? I'm not familiar with JavaScript and need assistance as I've never created it, only edited existing scripts. I have a layout with two tables side-by-side. On mobile devices, the second table is pushed below ...

javascripthtmlcssresponsive-design