Mastering Media Queries: A Beginner's Guide to Creating Responsive Websites

Introduction

The world has taken a major shift from where it used to be in terms of how users view their desired websites. Back in the day, all websites were built with the assumption that they would only be viewed on desktops.

As technology advanced, various devices such as Mobile phones, tablets, laptops, and very large screens like monitors were created. Developers today are now faced with the problem of optimizing their websites to accommodate these various screen sizes.

A quick fix early developers came up with was to scale down their websites depending on the device the user views their website on. This wasn't a perfect solution as the content on the webpage started behaving strangely leaving a bad experience for users.

It was for this reason functionalities like media queries were introduced.

What are media queries

A media query is a functionality in CSS that allows the content of a webpage to adjust and scale depending on various conditions set. Media queries are created to write new CSS rules or more often override existing ones for different screen sizes. Media queries are essential if you want to do any form of responsive design.

Basic syntax

A media query is a conditional statement just like the if/else statement in javascript. Like any conditional statement, it takes a set of conditions and runs true if the requirement for these conditions is met.

In this case, the media query takes in a set of CSS rules and queries for a set of conditions, when the conditions have been met, it applies these rules to the webpage and the website starts to take a different shape. This is particularly useful when optimizing a webpage for different screen sizes. View the basic syntax for a media query below.

@media mediatype (condition: breakpoint){
/* CSS rules go here */
}

Breakdown of the media query syntax

Firstly, the @media keyword is used to specify a query for different media types. Whenever you want to write a media query you always have to start with the @media keyword.

Media type

The media type is an optional value that specifies the category device to which the media query applies. A media query starts to run when the specified media type matches the device.

There are four(4) media types namely;

Screen e.g mobile devices, smart watches, laptops, tablets e.t.c.
Print e.g Printers i.e how your page would look when a user tries to print it.
Speech e.g screen readers.
All - This refers to all the media types together i.e screen, print, and speech.

With media queries, you can set specific rules to only apply to a certain media type or all the media types together.

When specifying the media type, the syntax looks like this;

/*Media query for screen devices */
@media screen (condition: breakpoint){
/*css rules */
}
/*Media query for how your website would look
 when a user tries to print the page
 with a printer */
@media print (condition: breakpoint){
/*css rules */
}
/*Media query for speech devices */
@media speech (condition: breakpoint){
/*css rules */
}
/*This media query would include styles
 for all media types */
@media all (condition: breakpoint){
/*css rules */
}

As I said before, the media type is an optional value. When the media type isn't specified, CSS by default would run with all the types of media.

In this case, the syntax would look like this;

@media (condition:breakpoint){
/*css rules */
}

Condition

The condition in the media query syntax states what condition the browser must be in for the contained CSS to be applied.

Popular conditions are;

Min-width - Min-width refers to the minimum value the browser must reach before it starts applying the CSS rules in the media query. For example, if you set the min-width to 500px, all the CSS styling embedded in the media query would apply when the browser window is 500px and above.
```
  @media all (min-width:500px){
  /*css rules */
  }
```
Max-width - Max-width is similar to min-width. In this case, the CSS styles would be applied when the browser reaches a maximum number, i.e, from that number and above.
```
  @media all (max-width: 780px){
  /*css rules */
  } /*The CSS embedded in the media query
   would only apply when the browser window is
   780px and above, i.e, large screens */
```
%[media.giphy.com/media/xCsrTFpioZUosEW2aW/gi..

It is advised to mostly use min-width when developing your websites because it is good practice to always use the mobile-first approach. The mobile-first approach is optimizing your website for mobile devices first and then scaling up your website for larger screens.
Orientation - This deals with the orientation of the device i.e landscape mode which is when the longer sides of the browser window are horizontal or portrait mode when the longer sides of the browser window are vertical.

@media all (Orientation: landscape){
/*css rules */
}

Breakpoint

The point at which a media query is introduced is known as a breakpoint.

Listed below are some of the common breakpoints used by developers;

480px - Mobile devices and phones.
768px - Tablets.
1024px - Smaller computer screens and laptops.
1280px or wider - Desktops and larger screens.

These breakpoints are not set in stone and you can use whatever breakpoint you desire. Many developers just fiddle around with their designs looking for where things start to break and use that breakpoint in their media query.

Putting all said above in mind, a media query syntax with the breakpoint added would look like this;

@media screen (min-width:480px){
/*css rules */
} /* 480px is the point where the css rules
 contained would start applying to the page */

Combining Media query conditions

It is possible to combine media query conditions to create fixed-range breakpoints.

The and keyword is used to specify a range of conditions and breakpoints that must be met for the CSS rules you specified to be applied. For instance, if you want a range between 500px and 790px you would use the and keyword to combine the breakpoints and the CSS rules contained in the media query would only be visible between these points.

@media (min-width:500px) and (max-width:790px){
/*css rules */
}

A , comma is used to mean or. It means if you want your website to change when the width of the browser window is above 780px or below 500px for instance, you would use a comma to specify this in your media query.

@media (max-width:780px) , (min-width:500px){
/*css rules */
}

One thing to note about media queries is that they behave like any other selector in CSS in terms of specificity hierarchy. If the media query to target a specific element or elements is written before the element is declared in your CSS, your media query wouldn't have any effect once the conditions set in the media query have been met. This happens because CSS is programmed to read from top to bottom and it will always go with the bottom selector if the selectors have the same specificity. It is best to always write your media queries after you have already written the CSS for the element or elements you wish to modify. You can do this just below the CSS styling for that element or write all your media queries at the very bottom of your stylesheet.