Media queries and relative sizes

Media queries

Media queries provide the possibility to ask for details about features of the device displaying the content, and to apply styles depending on the features of the device. Media queries are built with set of media features and logical operators not, only and and. The most common features are: width, height, orientation, aspect-ratio, color and resolution (which is actually pixel density), where some of the features include a minimum (min) and maximum (max) values.

For a comprehensive list of media features, see MDX Web Docs on Using media queries.

As an example, the following styling dictates that by default, the background color of a page is white, and if the width of the viewport is smaller than 700px, the background color of the page should be light gray. Finally, if the width of the viewport is smaller than 500px, the content should not be shown at all.

body {
  background-color: white;
}
@media (max-width: 700px) {
  body {
    background-color: lightgray;
  }
}
@media (max-width: 500px) {
  body {
    display: none;
  }
}

The iframe below uses the above style. When you adjust the width of this page (i.e. the width of the screen that you use to read these materials), you'll notice that the background color will also change at some point, and when the width is small enough, the contents are no longer displayed.

Relative sizes

With responsive web design, the key idea is that all content, including fonts and image sizes, can be contextually resized to fit the given space. Instead of using actual pixel sizes for defining the element sizes, the sizes are defined or scaled using percentages or relative units (mostly) with the available viewport properties.

When defining the size of elements, the following operators are the most commonly used:

• em -- size relative to its parent element (nested hierarchy)
• rem -- size relative to the root element (HTML tag)
• vw -- size relative to the viewport width
• vh -- size relative to the viewport height
• % -- size relative to the parent element

In general, the calculation is always done in the form target / context = result.

When considering fonts, the most common default font size in browsers is 16 pixels (px). In terms of em, this would make 1em = 16px, while 2em = 32px, 3em = 48px, and so on. As em definitions are inherited from their parent elements and most markup languages are -- well -- a spaghetti of embedded hierarchies, the rem is convenient when one looks to refer back to the original scaling defined in the top most MTHL header (or in the browser).

In practice, we could set the font size of the body of a document to be 2em, and then create two separate stylings, where one of them has 1.5em as size, while the other has 1.5rem as size. When these are used within an element that resides within the body, the relative difference is visible.

body {
  font-size: 2em;
}
#em {
  font-size: 1.5em;
}
#rem {
  font-size: 1.5rem;
}

The page below uses the above styling. The text Hello em is in an element that uses the style with the identifier em, while the text Hello rem is in an element that uses the style with the identifier rem.

While em and rem are primarily used for font sizing (in addition to px), %, vw, and vh are mostly used for margins, padding, spacing, and widths/heights. The following example provides another example, where a level 1 heading element is styled with 1.5em font size, and div elements are styled with 40% width. The div elements are also styled with 60vh height, which is a shorthand for 60% of the viewport height.

h1 {
  font-size: 1.5em;
  font-style: italic;
  font-weight: normal;
}
div {
  width: 40%;
  height: 60vh;
  background-color: lightgray;
}