This is the 17th day of my participation in the August Text Challenge.More challenges in August

The army can seize the general also, every man cannot seize the will also. Zi Han, Analects of Confucius

preface

Reactive layouts are a special branch of CSS layouts. Based on responsive layout, a very complete mobile adaptive knowledge link can be derived.

Understand the viewport

Viewport is also called “viewport”. A viewport on a mobile device is an area of the device’s screen that can be used to display web content. Viewport is not limited to the size of the browser’s viewport area. It may be larger or smaller than the browser’s viewport area. By default, viewPort on mobile devices is larger than the browser viewport area for the following reasons: Considering that mobile devices tend to have smaller resolutions than desktop computers, browsers on mobile devices set their default viewPort to 980px or 1024px in order to properly display web pages traditionally designed for desktop browsers, but the result may be a horizontal scroll bar in the browser.

Layout viewportlayout viewportWith the visual viewportvisual viewport

In mobile development, we often see meta tags like this:

<meta name="viewport" content="width=device-width">
Copy the code

Width is the width of the layout viewport. So what is a layout viewport? You can now open a new Chrome TAB, go to www.baidu.com/ (baidu home page), right click, select “Check”, select Mobile mode, and refresh the page. You will get an element review screen that looks like this:

Search the HTML code and you’ll find that baidu’s mobile home page also sets the viewport in the meta tag to this common setting:

Why do I set width=device-width? What are the consequences if you do not set this parameter? So HERE I arbitrarily changed width to 1000 and found that the page became

We noticed that the viewable area of the page became smaller. Why? This is due to a mismatch between the visual viewport and the layout viewport.

By visual viewport, it refers to the actual visible area of your device, which is the width and height of the browser. On the PC side, we can zoom in and out of the browser. However, on mobile devices, the width and height of the browser are generally not supported. The size of the browser is determined by the screen size of the device. In the current example, the visual viewport is the range indicated by the red arrow below:

We get the width and height of the viewport by accessing the window.innerWidth and window.innerHeight properties:

So what is the layout viewport?

The layout viewport refers to the area occupied by the actual layout of the page. As for the layout viewport, it can be understood as “canvas”. The size of the canvas restricts how much scope you can draw. We set the layout viewport to 1000, and the area of the canvas is beyond the scope of the visible area, that is, the scope of the visual viewport, as shown in the picture:

We can through the document. The documentElement. ClientWidth for layout viewport width.

Ideal Viewport

From the above we can find that visual viewport and layout the size of the viewport is not always the same, when both range, can appear is not in conformity with the expected effect of display, in fact, most of the time, the layout is the width of the viewport itself cannot and visual viewport match exactly, in order to solve this problem, people put forward the concept of “ideal viewport”, It refers to the optimal size of the layout viewport.

‘Ideal size’ refers to the size where the entire page covers the phone’s screen. This size does not need to be calculated manually. The manufacturer will provide a page design scheme that best fits this screen size according to the screen size of the mobile phone. We can apply this scheme by following a line of code:

<meta name = "viewport" content="width=device-width">
Copy the code

Here the width property corresponds to the value of the layout viewport. The purpose of setting width = device-width is to make the width of the layout viewport match the width of the visual viewport.

Rem and em

Rem refers to the unit of length calculated relative to the font size of the root element of the HTML, such as when we set a font size for the HTML

html{
    font-size: 100px;
}
Copy the code

1rem = 100px

Em is also a unit of relative length, which is relative to the font size of the elements that apply to them, such as a div with a font size of 20px

div{
    font-size: 20px;
    padding: 1em;
    width: 2em;
}
Copy the code

So 1em is equal to 20px

Many people think that the em unit takes the font size of the current element relative to the parent element. This is not true. In some cases, the EM unit does match the font size of the parent element, but this is not the nature of EM.

.farther{
    font-size: 20px;
}
.son{
    width: 20em;
    height: 20em;
}

<div class="farther"> parent <divclass="son"</div> </div>Copy the code

The width and height of the son element are 200px and 400px, respectively. In this case, the tolerance of em is not the parent element’s font size, but the current element’s font size, just because the inheritance occurs, so that the current element’s font size is the same as the parent element’s font size. We give son its own font size property so that inheritance does not occur, and em will simply take the specified font size value

.son{
    font-size: 16px;
    width: 20em;
    height: 20em;
}
Copy the code

The width and height of the son element is 320px, so you can see that em takes the current element’s font size.

What is responsive layout

The purpose of responsive layouts is to make our pages look good on screens of different sizes. A layout scheme that allows a page to fit multiple screens is called a responsive layout scheme.

Media queries

Since the problem of screen size is uncertain, the most straightforward idea is to find a way to sense changes in screen size and display different styles according to different screen sizes. Media queries do just that, and they are an old and classic responsive layout solution that is the cornerstone of BootStrap’s responsive nature.

@media screen and (max-width: 320px) { 
    div {
        width: 160px;
    }
}

@media screen and (min-width: 768px) { 
    div {
        width: 300px; }}Copy the code

  • Max-width: indicates the limit of the maximum width. For example, in our first media query statement, max-width: 320px;

  • Min-width: indicates the limit of the minimum width. For example, in our first media query statement, min-width: 768px, it means that when the device screen width is at least 768px, the style rule of this statement is adopted.

rem

Here we recommend you to use flexive. js, which is a relatively mature mobile terminal adaptive solution library integrated by Handtao team.

vw/vh

Vw and VH are cas units that differ from REM and PX in that they are inherently proportionally scaled:

  • Vw: 1vw = Visual viewport width /100
  • Vh: 1vh = Visual port height /100
.responsive{
    width: 10vw;
    height: 10vh;
    background: blue;
}
<div class='responsive'></div>
Copy the code

10VW and 10vh, this element should always occupy a tenth of the entire page width/height.