Rem is the font unit of the root element, which is only affected by the HTML font size. 1rem = 1

① Use query configuration + REM for adaptation

② Js + REM for adaptation

Compared with the two adaptation methods, the first one is more direct. It can be achieved by code after conversion after measurement with a measuring tool. However, it will be troublesome when many screens of different sizes need adaptation. The second method is relatively simple compared with this case. It uses JS code to obtain the size of the current screen, without the aid of external query measurement tools, only using the code can achieve adaptation.

First code example:

*{ margin: 0; padding: 0; } @media only screen and (width:750px) { html{ font-size: 100px; } } @media only screen and (width:375px) { html{ font-size: 50px; }} @media only screen and (width:320px) {HTML {font-size: 42.6666px; }} @media only screen and (width:414px) {HTML {font-size: 55.2px; }}. Title {font-size: 0.75rem; } img {width: 3.75 rem; }Copy the code

Example of the second type of code:

let docEle = window.document.documentElement; Font-size function refresh(){// width specifies the width of the phone screen docEle.getBoundingClientRect().width; If (width>750){width=750} let fs = width / 7.5 document.querySelector(" HTML ").style.fontsize = fs + "px"} refresh(); // resize =>{} Window.adDeventListener ("resize",()=>{ // The pagesHow page is displayed window.adDeventListener (" pagesHow ",()=>{refresh()})Copy the code