Detailed explanation of rem adaptation layout

There are many types of mobile phones today, not to mention the iPhone series, there are countless types of Android phones, so it is impossible to write a set of layout styles for every mobile phone. This is also impossible, but for front-ends that are increasingly striving for excellence Said, of course, to find a reasonable solution. rem is used for adaptive layout.

The effect to be achieved by adaptation is as shown below (a simple demonstration)

The two divs occupy half of the screen regardless of whether they are on a large screen or a small screen.

Although the above simple use of percentages can be achieved, percentages cannot achieve font adaptation, and it is still difficult to convert percentages into corresponding sizes. Next, let’s talk about our protagonist rem this time (we usually only adapt to the width)

First of all, rem is a relative unit relative to the fontSize size of the root element, that is to say, 1rem is equal to the fontSize size of html. Next, we only need to change the fontSize of the html element to control the size of rem. Next, how do we adapt to different screens? As long as we ensure that the larger the screen width, the larger the px value represented by 1rem and the larger the fontSize value of HTML. In other words, the fontSize of HTML must be proportional to the width of the screen.

Let’s talk about some concepts: device pixel ratio , device physical pixels , device independent pixels (sometimes also called virtual pixels)

Device pixel ratio = device physical pixels/device independent pixels

Device physical pixel: The smallest unit displayed on the device

Device-independent pixels: Device-independent units used to logically measure pixels (CSS dimensions).

Take iphone6/7/8 as an example. The physical pixels of iphone6/7/8 are 750, which is the actual size of the device, and px is an independent pixel unit of the device. iphone6/7/8 is a 2x screen, and its css size is 375, the device pixel ratio is already set when the device leaves the factory. So how do we achieve adaptation?

This uses the most popular rem

First, according to the physical pixels of the device on different screens, different px sizes must be set with the fontSize of the html element.

1. Media inquiry

 html{font-size:16px;}@media screen and (min-width:240px) { html { font-size:9px; }}@media screen and (min-width:320px) {html {font-size:12px ;}}@media screen and (min-width:375px) {html{font-size:14.0625px;}}

Use @media screen and (min-width:XXX) to determine the size of the device, and then set the fontSize of html

2. js sets the fontSize of html (NetEase solution)

 function setRem () { let htmlRem = document.documentElement.clientWidth document.documentElement.style.fontSize = htmlRem/7.5 + 'px' }setRem()

The above code is based on iphone6 ​​as a design draft, and the result is the actual pixel of 1rem=100px. Because the device pixel ratio of iphone6 ​​is 2, 1rem is 50px in the browser preview, which means that the relationship between 1rem and the device width is 7.5 times. , the actual size will change if the device width changes by 1rem, and the proportion on the screen will not change. (Most of the solutions on the market are this kind)

3. Use vw, vh

 html{font-size: 10vw}

vw and vh are new relative units that divide the visual area into 100 parts of width and height, similar to percentage layout. This solution does not require writing js, but the compatibility is a bit poor.

Attached below is the vw and vh compatibility table

Each rem is relative to the fontSize of the root element, so all the effort is to set the fontSize of the root element proportional to the device width

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.