Introduction to CSS Multiscreen Layout

In today's world, a website must display well on devices with different screen sizes.

Typically, devices are divided into four classes: computers (desktop), laptops, tablets and phones.

Previously, in ancient times, popular screen sizes of all devices were known, fortunately there were not so many of them. And sites were made so that they were correctly displayed on a known list of resolutions.

There are so many devices now that it is impossible to make a list of resolutions for which a website should be made. It is now considered that the layout should be correctly displayed on a screen of any size.

This is achieved by rebuilding blocks at key points in the layout. These key points are chosen not for specific devices, but for the site content - so that it looks good.

Between key points, the width of the site elements should be floating so that it adjusts to the width of the screen. And at key points, the blocks are rebuilt into other positions.

The described layout is called adaptive or responsive (English ⁅en⁆responsive⁅/en⁆). We will study it in the following lessons.