We can not imagine modern web development without adaptive/responsive designs. It allows users to use web sources equally on any device: a smartphone, a tablet, a desktop, or a TV.

How does it work?

1. Development team defines how each element will look depending on the screen size;
2. Set the necessary instructions to the code;
3. Browser tracks the changes of a viewport;
4. Browser applies the rules that the dev team put in the form of the code.

Media-queries

Media-query is what makes adaptive/responsive designs possible. With the help of these queries, developers can set the styles of any element depending on the screen size.

Note

We can perceive media-query as instructions: "If a user screen is a desktop, apply such styles to the element. If a user screen is a smartphone, apply other styles to the element. And so on.".

The basic syntax of the media-query is as follows:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

1. <media_type> - declares the type of device. Possible values:
   • all - default value. If nothing is specified, the media rule works for all devices;
   • print - the media rule works for the devices that produce printed documents, like printers;
   • screen - the media rule works for all devices with the physical screen.
2. <media_feature> - declares device characteristics. Most common use:
   • min-width: - the minimum width of the viewport;
   • max-width: - the maximum width of the viewport.
3. <operator> - media-type and media-feature are separated by the optional logical operator. Its values can be: and or ,.

Note

In the following chapters, we will consider using media-queries in practice.