Media queries

What is a media query?

Media queries allow for different style rules to be specified given some specified conditions are met, allowing for websites that respond according to the capabilities of a device rather than the device itself. A media query is built from an optional media type and possibly many media feature expressions.

A media query takes the following form:

@media not|only media_type and (media_feature_expressions) {
    /* CSS rules here */
}

Media types

A media type describes the category of device a given set of style rules should apply to, of which there are three:

• all: The default, equivalent to not specifying a media type.
• screen: Styles that only apply to screen-based devices.
• print: Styles that only apply when printing.

Specifying a mediatype is relatively simple:

@media print {
}

This targets only printers which output print media.

It is important to know that if a logical operator is applied, not or only, the media type is no longer optional.

We may also only want to apply a media query if a specific feature of CSS is supported, we can do this by wrapping the query in a @supports rule:

@supports (display: flex) {
    @media screen and (min-width: 1024px) {

    }
}
                

This query will only take affect if the flex display type is available.

Media features

A media feature describes some characteristic of the device to output the media to, we can state a media query that only applies to non-colour screens up to a maximum width of 1024px like so:

Try resizing the screen, unless you are on a non-colour device with a screen the box will not have the wont-apply class applied. If we remove the not logical operator, the style will be applied when the screen is small enough:

See here for more information on media features.

Creating a responsive navigation bar with media queries

For this example, we will take a mobile-first approach; we will design the navigation bar for mobile displays first. First, we will create the list of navigation items and give each item a 100% width:

Now that we have the mobile-first design, we can add media queries to account for larger screen-sizes. We will use 1024px as the cutoff point, the size of a small laptop:

We can also use float's instead of the inline-block display type in the media queries to achieve the same effect:

Do take note, if using floats to position elements you will need to use the clearfix hack to prevent items from overlapping, overflowing, text squishing onto the same line as floated elements, etc... Here is an interesting article on the clearfix hack.

Adding a hamburger menu

A hamburger menu is the term given for the three lines you often see representing a menu on mobile and tablet devices, it is important to include them with a navigation menu designed to also work on mobile-devices. The only issue is that it cannot be created solely with HTML and CSS, without resorting to the checkbox hack which reduces the accessibility of the page for those dependent on accessibility devices. The following navigation bar has a snippet of JavaScript included for turning the menu into a hamburger menu on mobile devices. First though, we need to create a hamburger icon and

• Try pressing the hamburger button, it will toggle the navigation bar.

The snippet of JavaScript code responsible looks as follows:

const hamburgerBtn = document.querySelector(".hamburger > button");
const navigationLinks = document.querySelectorAll(".navigation-link4");

hamburgerBtn.addEventListener("click", event => navigationLinks.forEach(navlink => navlink.classList.toggle("show")));

To use this, just stick the HTML and CSS into appropriate files and then put the JavaScript code inside of a script tag at the bottom of the page for simplicity. Ideally, the JavaScript would be in a .js file to promote the concept of DRY (Don't Repeat Yourself).