There are several options available to you for incorporating media queries — which also depend
on the amount of the CSS definitions:
You can insert — as shown in the above example — the media queries directly after the
relevant selectors. Although, by doing this, you need to repeatedly insert the
same @media rule, you at least always have all the definitions together
for a particular selector. Here is a simple example of
In the case of small projects, you can also enter the media queries together at the end of the CSS file, e.g.
It is sometimes worthwhile even transferring the media queries to a separate file for larger projects. This file is then also incorporated in the head of the HTML files or, when @import is used, in the main CSS file.
We will use the first option in the following exercise.
Let us now look at how the whole thing works in practice.