Media Queries + EMs

Using EMs for media queries in CSS means that we are using a way to measure font sizes that is based on the size of the font in relation to the parent element. This way, we can create responsive designs that adapt to different screen sizes and devices.

For example, let's say we have a website with a title that is 24 pixels in size on desktop screens. If we want to make sure that the title is still readable on smaller screens, we can use EMs to make the font size adjust proportionally.

To do this, we need to set a base font size for the website using the following code:

html {
  font-size: 16px;
}

In this example, the base font size is set to 16 pixels. We can then use EMs to set the font size for the title like this:

h1 {
  font-size: 1.5em;
}

This means that the font size for the title will be 1.5 times the size of the base font, which is 16 pixels. So the actual font size for the title will be 24 pixels (1.5 x 16).

Now, if we want to make sure that the title is still readable on smaller screens, we can use media queries to adjust the base font size and make the title smaller.

Here is an example of how we can use media queries and EMs to make the title smaller on screens that are less than 600 pixels wide:

html {
  font-size: 16px;
}

h1 {
  font-size: 1.5em;
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }

  h1 {
    font-size: 1.2em;
  }
}

In this example, we are using a media query to check if the screen width is less than 600 pixels. If it is, we are changing the base font size to 14 pixels and making the title font size 1.2 times the base font size (which is now 14 pixels). This means that the actual font size for the title will be 16.8 pixels (1.2 x 14), which is smaller than the original size of 24 pixels.

Sources: