Set viewport to device width (not necessarily here, but this is the way to go)
Divide the viewport into 10rem, and calculate 1rem in the current browser pixel value, give it to the HTML tag font-size (divided into 10rem just for the convenience of calculation)
When you write CSS code, you encounter the place to adapt, such as width,margin,padding, and so on, do not use PX, changed to REM
JS and HTML code are as follows:
<! DOCTYPE html><Htmllang="ZH-CN" ><Head><Metacharset="Utf-8" ><MetaName="Viewport"Content="Width=device-width, Height=device-height" ><Title> beetle's path to the pit</Title><ScriptType="Text/javascript" > var Cssel =Document.createelement (' Style ');Document.documentElement.firstElementChild.appendChild (Cssel);function setpxperrem (var DPR = 1; //viewport is divided into 10 parts rem,html label Font-size set to 1rem size; var pxperrem = document.documentelement.clientwidth * DPR/ Span class= "Hljs-number" >10; cssel.innerhtml = "html{font-size: ' + pxperrem + ' px!important;} ';} Setpxperrem (); </script></ head><body> </body></ HTML> The CSS code makes a change like this:
Web-Mobile adaptation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
