What is adaptation

There are so many kinds of mobile phones today, not to mention the iPhone series, there are so many kinds of Android phones, so it is impossible to write a set of layout style for every mobile phone, it is also impossible to do, but for the increasingly refined front-end, of course, to find a reasonable solution. Rem uses adaptive layout.

Suitable to achieve the effect, as shown below (a simple demonstration)

Both divs take up half of the screen on both large and small screens

Although the above simple use of percentages can be achieved, percentages can not achieve font adaptation, percentage conversion to the corresponding size is still difficult. So let’s talk about our main character rem (we usually only use width)

Analysis of REM principle

Rem is a unit relative to the fontSize of the root element, that is, 1rem is equal to the fontSize of the HTML element. Then we can control the rem size by changing the fontSize of the HTML element. Now, how do we adapt to different screens, as long as we make the width of the screen larger and the size of the HTML fontSize larger, that is, the fontSize of the HTML is proportional to the width of the screen. A few more concepts about device pixel ratios, device physical pixels, device independent pixels (sometimes called virtual pixels)

Device pixel ratio = Device physical pixel/device independent pixel Device physical pixel: the smallest unit displayed on the device Device independent pixel: device independent unit used to measure pixels logically (CSS size).Copy the code

Take iphone6/7/8 for example, the physical pixel of iphone6/7/8 is 750, which is the actual size of the device, and px is the independent pixel unit of the device. Iphone6/7/8 is twice the screen, and its CSS size is 375. The pixel ratio of the device is set before the device leaves the factory. So how do we implement adaptation?

That’s where rem, the most popular one, comes in

Rem implementation scheme

First, set the PX size to be different from the fontSize of the HTML element, depending on the physical pixels of the device on the screen

  • 1. Media inquiries
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.0625 px.; }}Copy the code

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

  • 2, JS set HTML fontSize (netease scheme)
function setRem () {
        let htmlRem = document.documentElement.clientWidth
        document.documentElement.style.fontSize = htmlRem/7.5 + 'px'
      }
setRem()
Copy the code

The above code is based on the design of iphone6, and the result is 1rem=100px actual pixels. Since the pixel ratio of iphone6 device is 2, 1REM is 50px in the preview of the browser. In other words, the relationship between 1REM and the width of the device is 7.5 times, and the actual size of the device width changes by 1REM. And the scale on the screen is the same. (Most of these schemes are available on the market)

  • 3. Use VW and VH
html{
    font-size: 10vw
}
Copy the code

Vw and VH is a new relative unit, which divides the width and height of the visible area into 100 pieces, similar to the percentage layout. In this scheme, it does not need to write JS, but the compatibility is a little poor. The table of COMPATIBILITY of VW and VH is attached below

One province per post REM is fontSize relative to the root element, so all the effort is to set the fontSize of the root element proportional to the width of the device