Media queries

In the modern world, everything is constantly changing, including the Internet and technology: all the time you hear about new devices, browsers, etc. All these conditions must be taken into account when developing a website. The same site display on a smartphone and a personal computer will create discomfort for users. In modern web development, every developer needs to be able to make adaptable sites. If you want the display of your site to fit different user conditions and be responsive, you should use the media queries mechanism.

Devices

When using media queries, you must specify the device or media type to which a style will be applied. There are the following media type options:

• screen, which applies to display devices such as a computer monitor;

• print, which applies styles when printing from a printer;

• speech, which is intended for speech synthesizers (which are used for people with disabilities);

• all, applied to all devices (set by default).

It is important to indicate the correct type of device so that styles are applied when viewing the site from a monitor, from a smartphone, or when printing.

Properties

The second important element of media queries is the characteristics or properties in the presence of which certain styles are applied. For example, if the screen is 300px wide, the font size can be increased. The following properties exist:

• min-width, which applies when the width is greater than the minimum width;

• max-width, which applies when the width is less than the maximum width;

• min-height, which applies when the height is greater than the minimum height;

• max-height, which applies when the height is less than the maximum height;

• orientation, which checks the orientation of the device and takes two values, landscape (width is greater than height) or portrait (width is less than height);

• resolution, which checks the screen resolution (pixel density), dots per pixel (dppx), dots per centimeter (dpcm), and dots per inch (dpi);

• aspect-ratio, which checks the aspect ratio of the device, for example, 16/9 or 4/3.

Logical operations

The third component, logical operations, allows us to combine some conditions and devices. They work according to the rules of Boolean algebra:

• and combines conditions and requires all conditions to be met at the same time, for example, screen and (width: 600px) will apply to displays with a width of 600px;

• or is used for a logical OR operation. It is necessary to specify "," to apply it. It is used when at least one of the conditions is met, for example, screen, print will be fulfilled for screens or when printing the text;

• not is used to invert a condition, i.e. it will be true if the specified condition is not met, for example, not print, which applies to all types of devices except the printer.

Now you can put all the pieces together:

@media screen and (width: 600px) {
/* CSS code */;
}

Above is the syntax of a media query, this query will apply styles to devices with a display with 600px width. The AND operator is used to combine the two conditions.

It is also necessary to mention the only operator. The only statement is used to hide styles from older browsers that do not support the above syntax.

Adaptability

Adaptability is what makes your site display correctly on different devices. For example, on smartphones, the display will look one way, and on computers, it will look different, as in the pictures below.

In order to achieve this effect, you need to use media queries. Media queries are rules that, depending on a given condition, will apply certain CSS styles to the HTML page. Most often, different values of width and height are considered as a condition. Here's an example of media queries that will apply styles to a screen no larger than 600px width:

@media screen and (max-width: 600px) {
  body {
    /* styles */
    background-color: red;
  }

  p {
    font-size: 40px;
  }
}

@media is a keyword denoting a media query, screen is the device to which the styles will be applied, and combines the two conditions together, max-width: 600px is the property and value at which the styles will be applied. If the screen is 600 pixels in width or smaller, the screen turns red and the font size of the paragraphs will increase to 40 pixels.

Let's see what happens if we resize the screen to a value less than or equal to 600px

Now, if we resize the screen to a value larger than 600px, the styles won't be applied.

Summary

As a result, we learned how to use media queries, making our site responsive and adaptive to different types of devices. Now users of your sites will feel comfortable when visiting them both on their laptops and on smartphones or tablets.