Defining Media Queries

The @media rule can be used to select a set of rules that only work based upon criteria that you can test for.

The media rule can test for media features such as the height and width, the orientation, as well as the media type where the presentation will be seen (most typically we’ll use screen as the ). This means it follows the following general format.

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

Notice that not and only are keywords to define if, how, and where the rules enclosed within the braces may, or may not, be applied.

A common example will be to use something like:

@media screen and (max-width: 992px) {
    body {
    background-color: blue;
    }
}

Notice how you specify it is for a screen, and then a condition, such as max-width. It is common to specify several widths, for small devices like phones, medium devices like tablets and computers with browser windows that are not fully open, and larger devices such as desktop and laptop computers.

Some CSS Frameworks, like Bootstrap, will utilize even more divisions. Bootstrap uses 5 different divisions.

Break point	Dimensions
X-Small	0–576px
Small	≥576px
Medium	≥768px
Large	≥992px
Extra large	≥1200px
Extra extra large	≥1400px

https://mdbootstrap.com/docs/standard/layout/breakpoints/

Do you need to use all of those sizes? Maybe, maybe not. If you are using a CSS Framework like Bootstrap, you get them for free. If you are developing one on your own, then you tend to design based upon your end users’ needs.

Often you can determine this based upon the user persona that you hopefully already developed. Are you focusing on business users who are working at a desk (no need for mobile first strategy), sales people who present with a tablet and work at a desk, or end users walking around the city with a phone looking for what you offer? 

If they are going to be using a phone will it be a high end phone, or an older phone, or a mix? 

Knowing these things, means you get to know which size(s) you should be aiming for in your media query breakpoints. The more breakpoints you use, the more CSS design you have to create, but the better your site is going to look to more people.

Consider the page which looks like this:

While it would work fine on a desktop, on a iPhone, it now looks like:

Notice how the text along the side becomes more difficult to read as it is only a word or two wide. And if you have a smaller screen, then you might have issues reading even a word here or there, or once a large word is found, it leaves a large blank space and drops to below the image, making it harder to read still.

However, when you add the meta tag for the view port, and create a simple media selector for smaller screens, you can get something like this:

Notice how the text is much easier to read as it is all on the screen in its own block, instead of splitting space with the image? The CSS will also make the button appear on it’s own row, and bigger, so it’s easier for a mobile user to click on.

We’re currently hiding the navigation for smaller screens. We’ve not implemented mobile navigation yet, which is often done as well, hiding it behind a button of three lines, often called a hamburger.

@media screen and (max-width: 700px) {
    nav {
        display: none;
    }

    .img-left {

        float: none;
        display: block;
        margin: 10px auto;
    }

    button {
        width: 75%;
        max-width: 400px;
        margin: auto;
        display: block;
    }

}

    

The advantage of a modern CSS framework like Bootstrap is that it has considered things like mobile navigation, and already has them in place for when you need to use them.

Defining Media Queries was originally found on Access 2 Learn