Understanding the Proper Way to Use Media Queries in Responsive Design

Ava Garcia 10th Oct 2020

Responsive web design (also referred to as RWD) has become an indispensable part of web design - thanks to the need of making sites accessible across multiple devices. In fact, its popularity has exploded after the release of Google's "mobile-friendly" update.

While you may find plenty of responsive WordPress themes - that can be used to launch a mobile-optimized site in no time - but there are several problems associated with ready-made themes.

They may not be truly responsive and may cause your website to load slowly.

Wondering what to do next?

Well, if you know how to code, then using CSS media queries can help you build responsive WordPress themes. In this post, we'll make you learn about "Media Queries", and how it can be used in responsive web design.

Media Queries: An Overview

Media queries help in changing website properties based on the device dimensions. The simplest form of CSS media query help in creating different styles for the device screen.

<link href="screen-style.css" type="text/css" media="screen" rel="stylesheet"/>

This line of code will load the stylesheet (i.e. screen-style.css) for a device screen.

However, you can add many different styles for mobile devices on the basis of parameters such as device-width:

<link href="mobilestyles.css" type="text/css" media="screen and (max-device-width: 480px)" rel="stylesheet"/>

The above line of code will load the stylesheet named "mobilestyles.css" when the value of the media is set to screen, and the maximum width of your device is 480 px. Before getting started with CSS media queries, it is very important for you to understand the difference between "width" and "device-width".

What Do We Mean By "device-width" and "width"?

Calculate your responsive width using our Responsive Width calculator

The 'width' media feature is used to define the fixed width of the document window. On the contrary, the 'device-width' feature defines the width of the device's entire screen.

In simple words, "width" and "device-width" refers to the width of a device rather than a viewport width.

However, the main distinction is that using 'device-width' as the value of width will automatically make your website design adjust to the device it is being accessed on. While using 'width' will limit you to make use of the fixed width of a particular device.

But, an unfortunate reality is that many seasoned developers recommend using “device-width” media queries. While this may prove an easy way to create responsive layouts since your design will automatically adapt to the screen size it is being viewed on. However, choosing device-width will require you to style devices individually, which is difficult: since the number of devices for which you'll need to style your CSS is overwhelming and can result in writing poor code.

Thanks to the width-based media queries, you can have a fully responsive design that behaves as per your expectation across all of the screen devices. As a developer, when using 'width' media query, you just need to consider all the viewports (for which you want the webpage to resize). Additionally, make sure that the page is being restructured and resized – to suit your design and its content.

In the next section, we will take an example that will help you understand how using a 'width' media query is a better option than the 'device-width' media query.

Using Media Queries in Responsive Design

To make your website responsive using media queries, you'll need to include the “viewport” meta tag within the <head> element of your web page (as shown in the following line of code):

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

Adding the above line of code to your web page will make the page accessible across different devices. But, not using the code will make your users view just a zoomed-out version of your webpage on a particular device. However, it has been observed that users don't favor using the zoom option, for viewing a website’s content.

Let us now take an example that will demonstrate how a webpage will look on the iPhone 4 device using the “width” media query feature:

ul{ /* Desktop */
margin: 0 auto;
padding: 0;
list-style: none;
}
li{
width: 23%;
float: left;
margin: 5px 1%;
padding: 25px 0;
text-align: center;
background: #222;
color: #FFF;
}

@media only screen and (max-width: 768px) { /* Tablet */
li{
width: 48%;
}
}

@media only screen and (max-width: 640px) { /* Mobile */
li{
width: 96%;
margin: 5px 2%;
}
}

Output:

Result: Now, since this web page is using the meta tag, the iOS is showing the page correctly when viewed using a desktop, tablet, and mobile devices. This will make the media queries to work based on our preferences.

Conclusion

Remember that your website can be accessed using any of the mobile devices, and so it's important that your site can adjust according to the device screen - that is used to access the site. One best way to do so requires creating a responsive web design using media queries - that helps override your stylesheet based on your needs when it is accessed by a device.

The main reason behind using media queries (to create a responsive website) is its simple approach – that makes customizing a WordPress theme on different screen sizes an easy task.

Authored By Ava Garcia

Ava Garcia is a passionate WordPress developer who likes sharing her knowledge about latest advancements in the world of world of web development. If you're looking to hire WordPress developer , then Ava can prove to be an intelligent choice.

Also on DiscussDesk