vw + rem realizes mobile terminal adaptation-the simplest adaptive writing method

Foreword: Regarding mobile terminal adaptation, there are many ways to achieve it, including js initialization, meta tag setting, css tag setting and other combinations of one or more methods. Some methods are too cumbersome in my opinion. Today we will discuss a very simple mobile terminal adaptive method that only requires a few lines of css code and a calculator.

1. Several important concepts (physical pixels, css pixels, DPR):

　　1. Physical pixels: As the name implies, when the mobile phone (which is more friendly to write, the mobile phone is used to refer to the mobile terminal later) is produced, the pixels on the screen (pixels here are a fuzzy concept, just understand) The number is the physical pixel. Taking iphone6 ​​as an example (Ip6 is used to refer to the mobile phone [/ funny]), the horizontal physical pixel is 750px and the vertical is 1334px.

　　2. Css pixels: When the mobile phone performs display tasks, the size of the css pixels we set when writing the code. For example: when we need to display a div with full screen width on ip6, we need to set the width of the div to 375px ;

　　3. DPR: Physical pixels / css pixels = DPR. Of course, this is my personal understanding. Welcome to correct me.

　　Q: Why is there a distinction between physical pixels and css pixels?

　　A: Personal understanding is that the larger the physical pixels, the better. The larger the pixels that the device can display, the higher the screen resolution. But if the screen itself is small, and the physical pixels are large, and the physical pixels are used to display the content, wouldn't it be necessary to hold a magnifying glass to see clearly? Therefore, the existence of DPR is needed, that is, the ratio of physical pixels to css pixels. In other words: how many physical pixels show a css pixel.

Second, the required css attributes (vw, rem):

　　1. vw: vw is also a relative unit. Vw divides the screen width into 100 equal parts. 100vw is the full screen css pixel width of the current device. In ip6: 100vw = 375px (css pixels) ;

　　2. rem: Relative root node font size, a relative unit. It ’s hard to understand, so to give an example:

:root{
    font-size: 30px;
}

div{
    width:1rem;
}

In the above code: we set the root tag (: root === html) font size to 30px, then we set the width of the div element of this page to 1rem, then the width of the div is 30px. Similarly, if you want to set the div width to 60px, just write 2rem.

3. Demand and calculation method ( taking ip6 as an example ):

　　1. Our needs: The design draft given by the designer is 750px precision, standard ip6 size, we want to uniformly write the size as rem when writing the page, and the ratio with the design draft is 1: 100, that is: the design draft is marked 100px = css code 1rem (do n’t worry about why 1: 100, the focus is on adaptation);

　　2. Calculation process:

　　　　Known 100vw = 375px (css pixels), then 1vw = 3.75px (css pixels);

　　　　Known design draft of 100px (physical pixels) = 1rem, according to the DPR value of ip6 is 2 can be easily obtained: 1rem = 50px (css pixels);

　　　　1rem = ？vw    ——————>      50/3.75 = 13.333333333333...

　　　　In summary: we only need to set the font size of the root node to 13.333333333333vw , and then use rem as the unit to define the pixel size when writing css, that is, the entire page with ip6 as the standard size design draft can be realized on all mobile devices. adapted;

　　3. Principle: using the method that vw is a unit relative to the screen size of the device.

Fourth, specific practice (for students who do not understand the above principle, it does not matter. The following gives a basic css configuration of the project code with ip6 as the design draft ):

 

:root{
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.333333333333333333vw;
}
body{
  font-size: 0;
}

:root,body,#root{
  height: 100%;
  width: 100%;
}


.App{
  font-size: 0.3rem;
  width: 100%;
  height: 100%;
}

 

It needs to be explained that the body tag specifically sets a font-size to 0, this is to eliminate the gap between the sub-element tags.

#root and .App are self-defined id and class selectors. I want to initialize the font size to 30px, so I added font-size: 0.3rem to .App.

Five, the end

Let's take a look at the effect

 

 The upper box is written using rem as the unit, and the lower one uses px. Both of them also appear as 100px squares on ip6. (Some people may wonder why this place is 2rem instead of 1rem, because on the 750px wide picture of the design draft, the square is 200px)

When we changed the device to iPad Pro, they became the following:

 

 It can be seen that the red box does realize self-adaption.