Jan 062015
 

Nowadays, the webmasters of most websites must take into account the growing number of users browsing the web from mobile devices, smartphones and tablets.

The screen size and resolution of these devices is generally much smaller than that in the desktop and laptop devices that were taken as reference at the time the design of most websites was created.

Ideally, the design of a web site should be responsive, detecting the characteristics (screen size, resolution) of the device and adapting the layout consequently. The first step in this direction was the specification of the viewport meta tag, thas has already been explained in other articles in this blog. Currently, a more precise control on the responsive layout can be achieved using CSS media queries. This technique allows the designer to setup sets of CSS rules specific for different screen resolutions, device orientations, etc. In this way, the design can be made to adapt to different devices using the same HTML code for the page.

This post gives an overview of the usage of CSS media queries in the design of a web site.

Simple CSS media query example

The simplest usage of media queries is to define a set of CSS rules that will be applied on devices with screen resolutions lower than a minimum. For instance:

html, body, div, span, applet, p {
    font-size: 20px;
}
@media (max-device-width: 400px) {
    html, body, div, span, applet, p {
        font-size: 14px;
   }
}

In this example, the first rule in the stylesheet establishes, in the generic case, a font size of 20x for a set of HTML element types. However, the @media media query following it overrides this setting for devices with a horizontal resolution lower than 400 pixel, setting the font size to 14 pixel for those HTML elements.

Inside the media query definition, any CSS rule is allowed: font-family, background, margin, visibility, position,…

Thus, rules “visibility: hidden” can be added to hide some elements. “position: absolute” or “position: relative”, “top:” and “left:” rules can be added to change the location of other elements in the layout, etc.

Conditions that can be used in the definition of a media query

In the example above, the media query is defined for devices that met a single condition “max-device-width”. Other conditions can be used in the definition of the media query, such as orientation (portrait, landscape). Several conditions can also be combined using the “and” operator. For instance:

@media (max-device-width: 400px and orientation: landscape) {
...
}

A comma (acting as a “or” operator can also be used to combine conditions in the definition of the media query. In this case, any of the conditions validates the expression:

@media (min-device-width: 400px, max-device-width: 800px and orientation: portrait) {
...
}

Devices with hig pixel density

Screens of desktops and laptops have usually a standard density of 72 or 96 dots (pixel) per inch. However, recent mobile devices  usually have much higher densities, of 200 or even 300 pixel perl inch. This high density compensates the much smaller screen dimensions. A Samsung Galaxy S4, for instance, has a resolution of 1080 x 1920 physical pixel, in a 2,75 x 5,38 inches screen, which results in a density of about 250 pixel per inch.

However, to ensure compatibility between devices of different pixel densities, the unit used in the definition of media queries is not physical pixel, but rather “CSS pixel”. Thus, the resolution of a Galaxy S4 in CSS pixl is 360 x 640. This means that, in a Galaxy S4, every CSS pixel corresponds to three physical pixel.

A new unit “dppx” (dots per pixel) can be used in the definition of a media query to define rules based on the pixel density. Not all browsers support yet this new unit, but there are other alternatives for different browsers. For instance:

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit based browser */
       (min--moz-device-pixel-ratio: 2),    /* Firefox browsers older than Firefox 16 */
       (min-resolution: 2dppx),             /* The new density specification */
       (min-resolution: 192dpi)             /* "dpi" (dots per inch) can also be used */

References

Mozilla developers – CSS Media Queries

www.w3.org – How to unprefix -webkit-device-pixel-ratio

wikipedia – Píxel density

wikipedia – Dots per Inch

 Posted by at 10:12 pm

 Leave a Reply

(required)

(required)