简单的移动端app适配

这个方案是结合 sass来实现的

一、导入sass

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

二、在入口文件上获取不同屏幕下的字体大小

main.js

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

 

三、在公共 css文件中设置sass函数

common.scss

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

 

四、在具体css文件中引用该函数，这里需要注意的是UI设计师给的设计稿是按什么像素给图，如果是640px宽的话$rem变量应该设置为32px，同时应该为设计稿像素/2 = 实际像素

比如设计稿上量的宽度为60px

则实际设置为   width:px2rem(30);