Media Queries

Media queries are the rules in CSS that allow us to write targeted styles for different screen sizes, resolutions, orientation, and more.

HTML `meta` tags

Before we start using the media queries in our CSS we need to set the responsive meta tags in head of our HTML for cross browser support.

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

This meta tag sets the information for different browser on how to render the content of this page.

width=device-width width of this website should be set to the width of the device
initial-scale=1 the website should not be zoomed in or out

Media Queries Recap

In the previous chapters we have focused on screen size based Media Queries. Here is a quick summary of what we have learned:

The media queries are added in our CSS using the @media rule
We define the type of media following the @media rule such as screen
We can add multiple conditions separated by and
We can define conditions using ()
Each @media rule statement is followed by {} which contain the styles to be applied when the respective rule is true

@media screen and (min-width: 960px){
  /* Styles to be applied at 960px and above */
}

In the media query above we are saying that if the media on which this web page is displayed is a screen and the min-width of the screen is 960px then apply the styles defined inside the {}

Similar to the min-width we can also use max-width to apply styles only to a maximum width of the screen.

We can think of it as min-width is the starting point of the styles and max-width is the ending point.

So in the example above with min-width:960px we are saying the styles will be applied at the minimum width 960px and above.

If we write max-width:960px this will mean the styles will be applied only until the maximum width of 960px and below that.

Using `em` Unit

It is valid and common to use px unit for defining the width in our media queries, however when it comes to accessibility using em as the width unit in media query is much better. This helps to adjust the media query in case the user changes the size of text for their browser.

Calculating the em from px value is simple. We can divide the desired px width with 16 given 16px is the default font size of our browser.

If our media query is min-width:960px we can use the following 960 / 16 = 60 which could be written as min-width:60em

More than Device Width

With the more advanced options available in modern browsers users can set many options to their preference. We can use some of the advance media query parameters to further enhance user experience and accessibility of our website in these modern browsers.

Preferred Colour

The prefers-color-scheme parameter in our media query can help us to change the colours of our website to light or dark theme based on user preference set in their browsers.

The prefers-color-scheme accepts two values light or dark

@media (prefers-color-scheme: dark) {
  /* Styles */
}

A common practice for dark colour themes us to reduce the opacity of images so they are not fully bright.

@media (prefers-color-scheme: dark) {
  /* Styles */
  img{
    opacity: .9;
  }
  img:hover{
    opacity: 1;
  }
}

Motion preference

While animations are a fun way to attract and engage our users for some it can be distracting, cause discomfort or even seizures. We can check for a users preference for motion by using the prefers-reduced-motion parameter in our media query which accepts two parameters no-preference or reduce

@media (prefers-reduced-motion: reduce){
  /* styles for reducing the motion */
}

Hover or not

Many times we depend on hover to style an element for either displaying additional information or simply show change of state, but there are cases where hover is not an option like in a smartphone or hover is not fully functioning.

We can have our webpage deliver an alternative for users that do not have hover as an input.

Using the hover parameter which accepts two values none for no hover and hover for when hover is possible.

@media (hover: none) {
  /* styles */
}

# Media Queries

# HTML meta tags

# Media Queries Recap

# Using em Unit

# More than Device Width

# Preferred Colour

# Motion preference

# Hover or not

# Further Reading