This is the sixth day of my participation in the First Challenge 2022, for more details: First Challenge 2022 “.

Understand the viewport

Following the pixel relationship discussed in detail in the previous article juejin.cn/post/705597… We can find the following problems

Mobile terminal is different from PC terminal, because most of the PC terminal is 1px=1pt, that is, the general PC logical resolution is over a large, corresponding to the display of about 375 mobile terminal devices, the content must be displayed in one screen, there must be a horizontal scroll bar to display all the content, mobile terminal proposed the concept of two Windows

The currently visible part of the viewport is called a visual Viewport. The viewport may be smaller than the layout viewport, and their relationship is as follows

Viewport (display area) + area of horizontal scroll bar = Layout viewportCopy the code

Viewport refers to the area where the web page is displayed. Generally, the browser will set the viewport to 980 larger than the viewport area, so that the horizontal scroll bar appears. The following is the default viewport width of a typical browser

To prove the point, you probably don’t have to worry about the meta viewport tag when creating HTML files. Shortcuts to create HTML will automatically take over, and then open Chrome Debug mode, as shown below

<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, < span style> HTML,body{background:red; } </style> </head> <body> </body> </html>Copy the code

Results the following

If you remove< meta name = "viewport" content = "width = device - width, initial - scale = 1.0" >Viewport is set to device width, so viewport = layout window. Unset this setting and the default viewPort width is displayed

As for the specific parameters of viewport,MDN is rarely introduced, please refer to the detailed table of the third party website

width Set up thelayout viewportIs a positive integer, or the string “width-device”
initial-scale Sets the initial zoom value of the page to a number, possibly with a decimal
minimum-scale The minimum zoom value allowed to the user is a number, which can be a decimal
maximum-scale The maximum zoom value allowed to the user is a number, which can be a decimal
height Set up thelayout viewportThis property is not important to us and is rarely used
user-scalable Whether to allow users to zoom in and out. The value is “no” or “yes”, where “no” means “no” and “yes” means “yes”

Width =device-width set viewport width= layout width, but on iPhone and iPad, whether portrait or landscape, the width is the same as portrait. What it means to use initial-Scale =1.0, which is to scale the web page to 100% of the width of the viewport, but this time it’s IE on Windows Phone that sets the width of the web page to portrait width for both portrait and landscape. Write two sentences at this time, he will choose the maximum effect, compatible with all devices

  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
Copy the code

1. Pure scaling percentage adaptation

Suppose there are four div elements in a row

div{
    width:25%}Copy the code

This approach is widely used in responsive frameworks such as Bootstrap

  • According to the large screen, small screen can be direct percentage, there will not be a lot of white, appear extremely unbalanced page
  • You don’t care what the px is, it will automatically fit
  • There are no compatibility issues

Faults are

  • Different screen width gap is too large, resulting in page button content distortion.
  • Completely relative to the parent element, the element’s departure from the flow of the document can clutter the page

2. End adaptation of multiple sets of codes

In the form of media, CSS provides @media for writing segmented styles

     @media only screen and (min-width: 300px) {
            .main {
                width: 60px;
            }
        }

        @media only screen and (min-width: 400px) {
            .logo {
                width: 80px; }}Copy the code

Advantages:

  • The display is more flexible, such as a line showing three buttons at 300px, which can be manually changed to four at 400px

disadvantages

  • It is difficult to maintain multiple sets of design diagrams and CSS styles

3. Flexible layout of Flex and Grid

Elastic layout means that the width of the root device adaptively fills the screen, and several buttons are displayed according to the screen adaptively. This mode can be adapted to a small range. For MOBILE terminal H5, it still needs to be adapted with REM mode, and the compatibility is not very good.

4. Rem adaptation

Using rem relative units, for example, if the root element is set to 20px, then 1rem=20px, then all subsequent units are converted to the root element, and 30px is 1.5rem. This approach has the following advantages

  • You can scale a page by changing the font size of the root element
  • Customize the rem value of the root node according to the size

Of course there are disadvantages

  • It is still necessary to cooperate with @Media to set the REM size of different font sizes, but REM with @Media has been a relatively mainstream scheme

5. Use REM + VW adaptation

In order to do a good browser adaptation scheme, a set of scheme is summarized by referring to the design on the Internet

First of all, the design of the mobile terminal is relative to the standard design of Width :750px. The first step is set

So 1 px = 100 vw = 750 px0.1333vw
Copy the code

Then the second step is set

Set 1 rem = 100 px7.5 rem = 750 px as rem = 100 px = 113.33vw
Copy the code

The third step is to use @media for simple interval adaptation

html {
    font-size: 13.33333vw;
}

@media screen and (max-width: 300px) {
  html {
  font-size:1rem;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 300px) and (max-width: 400px) {
  html {
    font-size:1rem;
    font-size: 13.33333vw; }}... Operate according to how many screens fitCopy the code

And then because we’re actually figuring out what the px is for rem on each screen

html {
    font-size: 13.33333vw;
}

@media screen and (max-width: 300px) {
  html {
    font-size: 40px;// Based on real screen logical pixels
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 300px) and (max-width: 400px) {
  html {
    font-size: 53.32px;// Based on real screen logical pixels
    font-size: 13.33333vw; }}Copy the code

Note that vw is only available on android 4.0 and ios8