Simple mobile app adaptation

This solution is implemented in combination with sass

One, import sass

npm i sass-loader node-sass --save-dev

2. Get the font size under different screens on the entry file

main.js

function setHtmlFontSize(){
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
};

 

Three, set the sass function in the public css file

common.scss

@function px2rem($px){
    $rem:37.5px;
    @return (($px+px )/ $rem) + rem
}

 

4. Refer to the function in the specific css file. What you need to pay attention to here is what pixels are the design drafts given by the UI designer. If it is 640px wide, the $rem variable should be set to 32px, and it should be the design draft pixel/ 2 = actual pixels

For example, the width of the design draft is 60px

The actual setting is width:px2rem(30);