Media queries are essential for creating mobile-friendly websites, endorsed by Google. They allow for the application of CSS to ensure optimal screen size for various devices.

However, writing media queries can be tricky, with some practices now discouraged. They require conditional statements for each device, leading to lengthy and complex code.

The website’s loading time can be affected, slowing down display and potentially reducing usability. To avoid these issues, it’s crucial to understand how to write concise media queries.

In this article, we will cover the basics and benefits of media queries, along with key considerations for their use.

Media Queries for Responsive Design

Media queries have become vital for enabling responsive design in websites since the advent of CSS3.

They define breakpoints to set screen widths for devices, allowing websites to display optimally on various screens.

What is Responsive Design?

Responsive design ensures that web pages display correctly across different devices, regardless of the type.

Utilizing responsive design means that websites can always be viewed optimally, whether accessed from a smartphone or a PC. In response to the increase in users accessing websites from smartphones, Google also recommends responsive design. 

Responsive design not only maintains usability but also aids in achieving a mobile-friendly website that performs well in Google’s search rankings.

Understanding Breakpoints

Breakpoints are the points at which the website’s CSS changes to accommodate different screen widths. They are set in pixels, the smallest unit in digital imaging.

While there’s no fixed rule for breakpoints, common settings include;

• Smartphones: up to 480px
• Tablets: between 768px and 1023px
• PCs: 1024px and above

However, it’s impossible to have a one-size-fits-all approach due to the variety of device screen sizes. If the actual sizes differ from the examples given, specific adjustments should be made.

Benefits of Media Queries

With media queries, responsive design can be achieved by simply specifying the necessary conditions in a CSS file. The benefits include;

• Lower complexity in settings
• Easier maintenance 

Compared to programming languages, CSS is less complex and more user-friendly for beginners. Maintenance, such as modifications or changes, can be managed with just one CSS file, reducing the effort needed for upkeep.

Drawbacks of Media Queries

The main challenge with media queries is the length of the code.

Detailed conditions in media queries lead to increased code volume. This can slow down webpage loading and display, impacting usability. Maintenance and updates also require time to review the extensive code.

However, media queries allow for some shorthand, reducing the amount of code and lessening the load time of pages.

Alternatives to Media Queries for Responsive Design

There are the following ways to make websites responsive without relying on media queries.

• WordPress themes and plugins
• CSS layout modules
• CSS frameworks
• JavaScript 

Using WordPress themes and plugins is the easiest way to achieve responsive design.

For those with web development or programming knowledge, responsive design is possible using CSS layout modules like Flexbox, CSS frameworks like Bootstrap, or programming languages like JavaScript.

Google also provides guides on implementing responsive design with JavaScript.

Media Queries and Viewports

Both media queries and viewports are indispensable for responsive design and should be used together.

The viewport is crucial for creating mobile-friendly sites. However, using only the viewport is insufficient. Combining it with media queries enhances responsiveness. Conversely, setting media queries without defining the viewport will render the queries ineffective.

Being mobile-friendly is essential for websites. If you’re implementing media queries, ensure to include the viewport in your HTML.

What is a Viewport?

A viewport represents the visible area of a web page, essentially its width. The viewport code should be placed in the HTML’s head tag.

Google recommends including the following meta tag in the head section.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 

Source: Responsive Web Design, (Google Search Central)

For example, displaying a PC-oriented page on a smartphone without setting the viewport can result in small text and images, leading to poor usability.

Without a specified viewport, mobile browsers display a scaled-down version of the PC layout, making content difficult to read and not user-friendly.

Setting a viewport, however, displays a design optimized for smartphone screens, making web content easily readable on smartphones. Thus, the viewport tag is vital for all websites.

Mobile-First Indexing

Mobile-First Indexing (MFI) prioritizes the evaluation of websites for SEO based on their mobile version.

Before MFI, desktop websites were the standard for determining search rankings. With the introduction of mobile-first indexing, the focus shifted to prioritizing and indexing mobile-friendly sites in search engines.

The full transition to mobile-first indexing, started in March 2018, has been extended. Yet, with the increase in smartphone usage, the importance of mobile-friendly websites continues to grow.

Content Specified in Media Queries

When writing media queries, specify the target devices using media types and media features.

An example format is

media=”screen and (min-width: 640px)”

Both media types and features have recommended and deprecated options, which require careful consideration when used.

What is a Media Type?

A media type refers to the device on which a web page is displayed, encompassing a range of media like browsers on PCs, smartphones, tablets, screens, televisions, and print devices.

Media types are specified in CSS using @media or in the HTML elements <link> and <style> for the media attribute.

Recommended Media Types

From Media Queries Level 4, the following four media types are recommended.

Media type/Corresponding media 

• all: Suitable for all devices
• screen: For devices excluding printers and speech synthesizers
• print: For printers and print preview screens
• speech: For speech output devices

all or screen are commonly used in web development. Use all unless you specifically wish to exclude printer styles.

Deprecated Media Types

Avoid using the following deprecated media types

• aural
• braille
• embossed
• handheld
• projection
• tty
• tv

What are Media Features?

Media features specify elements like the width and height of a device’s display area, with width being the most commonly used. This is indicated with the term width.

Recommended Media Features

The main recommended media features include;

Media features/contents

• width: The width of the device’s viewport.
• height: The height of the device’s viewport.
• orientation: The orientation of the device
• aspect-ratio: The ratio of the viewport’s width to its height.
• resolution: The device’s screen resolution.

Deprecated Media Features

The following media features are not recommended and should be avoided.

• device-aspect-ratio
• device-width
• device-height

How to Write Media Queries

There are three main methods for writing media queries

-Within an HTML document, using the media attribute in a link tag.

-In CSS, using @media.

-In CSS, using @import.

• Writing the Media Attribute in the HTML Link Element

To include media queries in HTML, add the media attribute to the link tag that loads the CSS file.

<link rel=”stylesheet” href=”path to the file” media=”specified media type and (specified media feature)”>

For example, for devices with a maximum width of 640 pixels, it would look like this

<link rel=”stylesheet” href=”style.css” media=”screen and (max-width: 640px)”>

Place the link tag within the head of the HTML. This allows instructions to be conveyed to the browser and search engines without being visible to visitors of the website.

However, note that the style tag cannot be used within media queries.

Writing @media in CSS

By using @media in CSS, you can distribute styles to different devices.

The method of description is as follows.

@media specified media type and (specified media feature) {

  /* Style rules */

}

For example, for devices with a maximum width of 640 pixels, it would look like this;

@media screen and (max-width: 640px) {

  div {

    width: 100%;

  }

}

Writing @import in CSS

Using @import in CSS allows you to distribute files to different devices based on media queries.

Please write @import as follows.

@import url(‘file to load’) specified media type and (specified media feature);

For a device with a maximum width of 640 pixels, the example would be;

@import url(‘style.css’) screen and (max-width: 640px);

Simplifying Media Query Statements

There are two ways to streamline media query statements.

• Using shorthand notations
• Utilizing conjunctions

This compact coding can mitigate the weaknesses of media queries, which tend to slow down page display speed.

Shorthand in Media Queries

Media queries allow for shorthand notations, which can reduce the page loading time. It’s beneficial to know these shortcuts.

Shorthand can include;

• Omitting the media type all
• Using min and max in media features

Omitting the Media Type all

The media type all can target all media and can be omitted in the notation.

For example, to set a maximum width of 640 pixels for all devices, you would write as follows.

@media all and (max-width: 640px) {

  /* Style rules */

}

However, you can omit all and write it as follows.

@media (max-width: 640px) {

  /* Style rules */

}

Using min and max in Media Features

For media features like width or height, min and max can be used. These can be omitted and replaced with < or > respectively.

In continuation of the previous example, it could be as follows.

@media screen and (width < 640px) {

}

Using Conjunctions in Media Queries

Media queries allow using conjunctions to specify multiple media features together. Common conjunctions include the following.

• and
• or

and

With and, you can specify multiple media features at once. For instance, you can set both the maximum and minimum width simultaneously.

For example

@media (min-width: 200px) and (max-width: 640px) {

}

In the example above, a single statement specifies a minimum width of 200 pixels and a maximum of 640 pixels.

or

The conjunction or signifies an alternative. You can write or or use a comma (,).

For instance, to apply styles for widths above 200 pixels or 640 pixels, you would write as follows.

@media (max-width: 200px) or (min-width: 640px) {

}

Alternatively, using a comma can express the same condition

@media (max-width: 200px), (min-width: 640px) {

}

Summary

Media queries are now essential for implementing responsive design on all websites. However, when setting up responsive design with media queries, you must specify size conditions for each device. Lengthy code can complicate file management and slow down website display, potentially reducing usability. Responsive design, once predominantly advocated by Google for its simplicity with CSS, is now evolving with JavaScript implementations and CSS frameworks that optimize the website based on available space, rather than just switching layouts at breakpoints. Considering alternative methods for responsive design beyond media queries is advisable. If continuing with media queries, aim to keep your code concise by using shorthand and conjunctions effectively.

Author Profile

International Web Consultant Paveena Suphawet

A trilingual professional in English, Thai, and Japanese, she has numerous achievements in international SEO. She studied the latest IT technologies at Assumption International University, Thailand, and majored in International Business at the University of Greenwich, UK. Following her tenure at ExxonMobil’s Thai branch, she became a key member of Admano from its establishment.

Return to the top of Japan SEO