Adaptive design and media queries (CSS)

For various reasons it can be an advantage to have several stylesheets for handling different function, set-ups and/or browsers. With the introduction of smartphones and tablets, where the screens are significantly smaller than computers for work in general, it has become really important to have a design that either works when scaled down to a few inches or adapts to the type of computer and/or screen size. It can be something as practical as when you print out a page, only the relevant parts are printed out, e.g. headline and content, while navigation pane and adds are ignored. This is called adaptive design.

Adaptive design can be done in several ways, and as form follows function, the choice of which solution to use is a matter of what you need to do.

For the LINK tag you have the attribute MEDIA, and for each MEDIA you have a variabel for selection. Therefore you can have a specific style sheet for e.g. printouts, which is where the site often looks weird. Default for MEDIA is 'all', without variables, and you have the following option for MEDIA and variable:

Media type	Device type
all	All devices use this
braille	Used for braille tactile feedback devices, i.e. devices giving an embossed surface the user can touch and feel.
embossed	Used for braille printers.
handheld	Used for hand held devices (smartphones and tablets do NOT use this mediatype!).
print	Used for printouts, including when a page is shown as "print preview".
projection	Used for projectors/beamers.
screen	for screens, also including tablets and smartphones.
speech	Used for text-to-speech-emulators.
tty	Used for media with a fixed character width (e.g. teletypes, terminals, or portable devices with limited display capabilities).
tv	Used for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Variable	Effect
width	With of the current window (in pixels)
height	Height of the current window (in pixels)
device-width	Width of the device screen (in pixels)
device-height	Height of the device screen (in pixels)
orientation	Is the page seen in landscape or portrait orientation
aspect-ratio	Height to width ratio for the current window
device-aspect-ratio	Height to width ratio for the device screen
color	The number of color bits per color component
color-index	Number of colors the device can show
monochrome	Number of bits per pixel in a monochrome frame buffer
resolution	Screen resolution for the device, either as dots per inch (dpi) or dots per centimeter (dpcm)
scan	Is the display progressive or interlaced
grid	Is the device grid-based?

The variables can, for some of them, be found as extended versions with a minimum and maximum. These are the ones I know of, but there may be more:

Variable	Effect
max-width	Maximum width of the current window (in pixels)
min-width	Minimum width of the current window (in pixels)
max-height	Maximum height of the current window (in pixels)
min-height	Minimum height of the current window (in pixels)
max-device-width	Maximum width of the current device screen (in pixels)
min-device-width	Minimum width of the current device screen (in pixels)
max-device-height	Maximum height of the current device screen (in pixels)
min-device-height	Minimum height of the current device screen (in pixels)
max-aspect-ratio	Maximum height to width ratio for the current window
min-aspect-ratio	Minimum height to width ratio for the current window
max-device-aspect-ratio	Maximum height to width ratio for the current device screen
min-device-aspect-ratio	Maximum height to width ratio for the current device screen
max-resolution	Maximum screen resolution for the device
min-resolution	Minimum screen resolution for the device

The way to use it is to either have a separate LINK with its own style sheet, eller et media query.

LINK, e.g. for printouts formatted by the style sheet named PrinterFriendly.css, is just a line after the link used for the general layout:


Media query are sections in the style sheet used for the general formatting of the site:


As seen, it looks like defining a class, except using the at sign instead of the dot. Actually it is more like making a style sheet in the current style sheet, because you specify your tags and attributes, e.g. if you don't want the navigation part (the NAV tag) in your printout:


The printer function specifically is one of the functions where using LINK in stead of media query can be an advantage, as some old browsers cannot use media query (e.g. IE8 and earlier), but use LINK without any problems, it may be better to use LINK for the print function.

The extensions using minimum and maximum is where you can really work with the various types of computers, in regards to being a laptop, tablet or a smartphone. Especially since the media types and variables can be combined. Media types and variables are combined using "and".

If we take a look at an example, then on a computer with a high screen resolution you can easily use font size 24pt for your main headline (the H1 tag). For a lower screen resolution, this will cause problems, as the size becomes overwhelming, so here you use a smaller font, to maintain the readability of the page. Here's an example adapting to three different screen resolutions:


Currently there is no specific way of selecting smartphones, tablets or PC's, which would have made sense, but combining device-width, aspect ratio and resolution, you can get a useful sorting of the various screen types/sizes.

One of the more alternative ways of selecting is browser type, i.e.

-webkit	Google Chrome and Apple Safari
-moz	Mozilla Firefox
-o	Opera
-ms	Microsoft Internet Explorer (only ver. 9 and later)

so if you need something specifically for Firefox on a screen which is max. 960 pixels wide, it will be -moz-max-device-width: 960px. It will especially be things like vertical text, where the placement is highly browser dependent, where it makes sense using this option.

In general it can be said that the choice between multiple css files or media query is a matter of how much you have to change between the various media. Very large and complex css files can be difficult to maintain, on the other hand, you don't have to add a new line with LINK on all the pages on your site. In practice most people will probably end up using a combination.

Internet Explorer 8 and earlier can't use the MEDIA tag above. Here we use another trick. Today the problem is quite small, as these browsers vanished when Windows XP was discontinued, but there is still a few people out there, using these browsers. So for those who want to compensate for this, here goes:

Browsers read css files from the top down. If the same tag is given two different values for the same attribute, it will use the last one it read. Because Internet Explorer is one of the browsers able to read what is called conditional comments, you can start with reading a general css file, and if you have an Internet Explorer requiring something else, you overwrite the values with whatever new values that may be needed.

The evolution from Internet Explorer 6 to 7 is quite small, whereas there was quite a lot of development from 7 to 8, so you can expect to have a two tracks, one for handling Internet Explorer 8, and one for handling Internet Explorer 7 and before.

The code for "If Internet Explorer 8" is:


The code for "If Internet Explorer 7 or earlier version" is:


The code can be used in two ways, and the choice between them, is a matter of personal taste. Both have their advantages and disadvantages in regards to your site's structure and content.

The first one, and the one I used myself, is having three separate css files. One for handling the general parts, we can call it Layout.css, and two for handling Internet Explorer 7 and earlier (we can call it LayoutIE7.css) and one for Internet Explorer 8 (which we will call LayoutIE8.css).


Notice! In the two css files handling the old versions of Internet Explorer, you only write the attributter that needs to be changed from what is stated in the Layout.css-filen. Writing everything else gives you noting but problems with site maintenance.

Remember that because the code is read from the top down, conditional comments have to be after the style sheet handling the general layout.


The other way of using the conditional comments, is directly in the css file. Let's say that for the tag H1, the left margin has to be 50 pixels wide under normal conditions, but for Internet Explorer 8 it has to be 45 pixels and for Internet Explorer 7 and before, it has to be 55 pixels. For all browsers the text has to be bold and italic in font size 24.0pt. Then the css file looks like this: