What Is Responsive Web Design?

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:

python
9
1
2
3
@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.