To tell the browser how to display the page dimensions and change its scale, use the viewport meta tag. It is written in the <head> of the site. With this meta tag, developers can set the screen width for devices, written in CSS.
The viewport meta tag is written as follows:
<meta name="viewport" content="name=value, name=value"
It is recommended to write it as follows:
<meta name=viewport content="width=device-width, initial-scale=1.0">
width=device-width — indicates that a correspondence is established between the width of the website page and the width of the gadget screen .
initial-scale=1.0 - this attribute will give the browser a "task" to set the scale correspondence to 1:1 for pixels, in other words - do not scale.
Other attributes and parameters besides those named can also be set for the meta tag.
What is the main role in development when it comes to adaptive website design? CSS3 media queries. They contain a media type (printers, smartphones, tablets, TVs, projectors, etc.) and a condition that can be true or false. The use of different CSS styles depends on the following indicators: whether the media type is correct or not and what condition is met. If the condition is true, the styles specified in the given media query are applied; if false, regular CSS styles are applied.
These queries help create different site displays for smartphones, tablets and desktop screens. All modern browsers support them.
It is written as follows:
@media screen and (max-width: 1000 px){
.class {
property: value;
}
}
@media – media query;
screen – media type (also called media type);
max-width: 1000 px – a condition that must be met (in this example, the styles will be applied when the window width is less than 1000 px);
.class – the corresponding selectors (classes, id) are registered, where the properties acquire new values.
Source: shutterstock.com
Most often, when developing adaptive design, they turn to such media functions as:
max-width: width — indicates that if the browser window width is reduced compared to the specified one, the condition will be met and the corresponding styles will be applied (for example, max-width: 768 px should be understood as follows: if the browser window width is less than 768 pixels, it is necessary to resort to the styles automotive mailing list specified in the media query).
min-width: width — indicates that the condition is met and the styles specified in the request are applied if the browser window width is greater than the specified one (example: min-width: 480 px).
In addition, it is also possible to use other functions: color, device-width, grid, height, orientation: landscape, orientation: portrait, resolution, etc.
The values used in media functions have another name – breakpoints. It is at these points that the site design changes:
320 px - mobile;
480 px - mobile;
768 px — tablets;
1024 px - tablets and netbooks;
from 1280 px and above - personal computers.
It is not necessary for breakpoints to be strictly tied to a specific display resolution, because they can be created with other parameters in values where the layout visually breaks, is displayed with errors, or its correct display stops altogether.
Logical operators are also used in media queries:
and – logical AND, used when it is necessary to combine several conditions (example: @media print and (color) { … }).
not – logical NOT , used to negate a condition (example: @media not all and (color) { … }).
only – used for older browsers that do not support media queries (example: @media only screen and (max-width: 1300px) { … }).
Media queries are written at the very end of the style file, after all the main CSS styles.
Want to see how your web resource looks on different devices? There is a convenient service quirktools.com. Or you can do it directly from the browser: open your site, right-click> "View code", find the tool that allows you to change the screen size. In Google Chrome and Yandex browser it will be at the top in the center.