Media Queries

Media queries assign a CSS stylesheet to an output medium and thereby determine how an associated HTML file should be displayed on different output media. This way, certain characteristics noted in the stylesheet can be used to select optimal display variants for different output types such as mobile phones, tablets or different screen formats.

General information

Media queries are an important part of CSS3 that allows programmers to create responsive websites that are correctly displayed on different sized screens. “Correct” here means that the content itself is not changed, but the way it is output or displayed changes. With the dissemination of mobile devices, the display formats have also changed fundamentally. Screens of smartphones are much smaller than those of desktop computers. Tablets, PDAs and notebooks also have different screen sizes.

In order to be able to create the optimal markup for all display formats using CSS, the media information is queried before a website is loaded using media queries. It is not necessary to note the appropriate screen size for each individual device, but rather types of devices, media features, and so-called breakpoints. The end device then loads the correct part of the CSS file automatically and displays the content as the size of the screen allows.

Functions

Basically, media queries consist of a media type and optionally several media features such as width, height, or color, to determine certain output characteristics for different media. Media queries can be included for different device types in the HTML document via tag. For this purpose, the value screen must be noted for the media attribute in addition to the necessary standard specifications. If nothing is specified there, the default value all applies.

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

Possible values

• all: all devices
• handheld: PDAs or cell phones with small screens
• print: printers
• tv: TV or similar devices
• aural: voice browsers that read out the text of the web page (there are also commands for Braille or Braille printers)
• projection: projectors and similar devices
• screen: Conventional computer screen

In addition, media queries can be written into a separate CSS file. Here general and deviating CSS rules are defined with @media print {} or @media handheld{}. This variant has the advantage that the user's terminal only has to load one CSS file. It is recommended to separate HTML and CSS anyway.

Breakpoints

Another concept is that of breakpoints. Here, it is not media types that are noted, but rather certain pixel sizes that provide a vanishing point for the display on different devices. If the device uses a certain number of pixels, the content is displayed accordingly. For example, a single-column layout is chosen for 320 to 759 pixels, which can be displayed on cell phones, while tablets can display two columns at 760 to 979. Breakpoints can be set in the HTML as well as in the CSS file.

Relevance for Search Engine Optimization

Media queries are essential when it comes to the widest possible user base. Users nowadays use different devices to browse, shop online or use different services. Media queries are an important part of mobile optimization, because this is how the content of a responsive website is displayed correctly. If this is not the case, users are quickly dissatisfied and leave the website they tried to reach with their mobile device.