You are already familiar with the media types that you can specify when incorporating CSS files in the head of your HTML files, such as media="screen":
This allows you to indicate that the incorporated CSS file is only being used for the screen display (as opposed to printing, for instance, media="print").
This can alternatively be specified using CSS code:
Within the braces you can then put the selectors and properties that only apply to the screen display, e.g.
However, the specification screen — whether input in HTML or CSS — relates to all types of screens on both desktop monitors and smartphone displays.8 Therefore, additional options for differentiating among them — e. g. using screen size — were introduced in CSS3, in the form of media queries. They can also be inserted in either HTML or CSS, e.g.
8 The specification media="handheld" used to relate only
to conventional cellphones, etc. — mostly still with monochrome screens — and is
nowadays obsolete. On the other hand, smartphones and tablets are also regarded
as computer screens.
In this instance, the media type screen is linked to certain media features, in this case the maximum width. Therefore the CSS definitions given in the example apply only to screens with a maximum width of 1024px (e.g. iPad), but not to larger monitors.
You will occasionally still see here the additional keyword only:
The keyword only is merely used to hide the specifications for older browsers. It is hardly needed any more nowadays.
The difference as to whether you input the media queries in the link in the head of your HTML file or in the CSS file is obvious. In the first instance, the definitions for the whole linked CSS file apply only to a specific screen size. You would then need a separate CSS file for each screen size.
In the second instance, you can create different definitions in a single CSS file in as many @media blocks as you want. As, in this case, only one CSS document needs to be loaded, there will also be fewer HTTP requests, thus speeding up the load times.
I therefore recommend that you use the following procedure. Continue inserting the simple media types in the HTML link, e.g.
The screen.css file will then contain the alternative definitions for different screen sizes using media queries. In this case, there is no more need to specify screen and it can be omitted. The following syntax remains:
This syntax now provides you with the ability to define as many layout and design versions as you want for any element in your website in a single CSS file. You can choose whether to use the screen size or viewport size as the basis for this.
The following size details are available (with the pixel values obviously being provided only as an example):
|Size details for the viewport||Size details for the screen|
The device options relate to the screen size of the relevant device (computer monitor, smartphone display, etc.), regardless of the browser’s actual window size. But, as a result of this, these options have two serious disadvantages:
9 Except, of course, using emulator software.
The following solution is available for the latter problem:
With this you could enquire about whether the user is actually holding the device in portrait or landscape format and define different layouts for it. However, this might involve a huge amount of additional effort in producing our CSS definitions, which are already quite complex. There is an easier way to do it:
I therefore recommend using the viewport options (without device). They have two suitable advantages: