College signup html error. Run-time configuration

In your work, you will have to solve the problem of developing website pages for various screen sizes, from small smartphones to widescreen monitors and TVs. With the growth of portable technology and its active use in everyday life, the need to develop universal pages adapted to various devices and resolutions has become more relevant than ever.

In this article, we will analyze such concepts as responsive web design and adaptive web design, consider their differences and advantages, and consider situations in which it is necessary to use these techniques in practice. In addition, we will learn what media queries are, how and why you need to use them in your styles.

Basic Concepts

In this article, I do not set myself the goal of sorting out and putting an end to the confusion regarding the terms that relate to creating website pages that will be displayed equally on all types of devices, will compress the layout depending on the resolution, will use different styles for a certain type devices and the like, more than one book has been written on these topics. The main task is to gain an understanding of how to solve such problems and what native tools we can use. Let's first look at the basic concepts.

What is responsive web design ( responsive web design)? This is first of all a flexible, or otherwise “rubber” grid of the layout of your site based on relative units of measurement, which allows you to use one layout for different types of devices, flexible images and video materials, and media queries.

Why is flexible mesh needed? The pages of your site can be accessed from devices whose screen resolutions will be different and creating pages with a fixed width in this case does not make sense, since in this case you need a page that will narrow or expand in order to adjust and adapt to a specific device. Additionally, when creating a flexible grid, we can scale images and videos to fit on the appropriate screen size.

The next important topic of this article and CSS in general is media queries, they allow you to send different styles to the browser depending on certain conditions, for example, such as device type, resolution, orientation and the like.

In general, responsive web design is a rather narrow concept, which in modern realities is part of such a voluminous concept as adaptive web design, which includes such a concept as responsive web design.

And so, responsive web design ( adaptive web design) includes a flexible site layout grid, responsive images and videos, media queries, and progressive enhancement ( progressive enhancement).

Progressive enhancement refers to the technique in which we build a site to provide all its users with a basic view of content and functionality, while progressively improving the appearance and functionality depending on certain conditions, for example, for those end users who have more modern software (browser), or connection speed. As a result, we provide the opportunity to use the site for the widest possible audience, while adapting to the necessary conditions.

So that you understand, adaptive web design is not a separate technology, or a specific method of building website pages, since it contains many layout methods, thanks to which the layout of your website will adapt to different conditions.

Preparing for adaptive layout

Currently, many sites are still created to be displayed on monitor screens, for this reason mobile browsers do not display the page at 100%, but display it in a virtual window ( viewport), which is usually wider than the device screen. To make the page fit on the device screen, mobile browsers reduce its scale (compress the displayed result so that it can be seen immediately), the scaling factor depends on the characteristics of the specific device. Users can then change and scale the visible area to see different parts of the page.

This behavior of mobile browsers can handle most sites, but is not suitable for sites with responsive web design for which scaling is not acceptable.

For the first time in the mobile version of the browser Safari a scope meta tag has appeared ( viewport meta tag), which allows website developers to control both the size of the viewport and the scale of the page itself. Subsequently, other modern mobile browsers supported this meta tag, despite the fact that at that time it was not part of any web standard.

Earlier in this tutorial, we've covered rules such as , which allows websites to download and use fonts other than "web safe fonts", , which allows you to control intermediate stages of animation by creating keyframes (or points) during the animation process, and the @import rule, it is used to import content CSS file to the current style sheet, we will talk about it later in the article.

Connecting media queries using the @media rule