自适应rem

 

设置计算html的font-size

@media screen and (max-width:320px){
    html{
        font-size:20px;
    }
}
@media screen and (min-width:320px) and (max-width:360px){
    html{
        font-size:24px;
    }
}

方法二

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
let htmlDom = document.getElementsByTagName("html")[0]
htmlDom.style.fontSize="20px"

引入sass，样式里面写的px调用这个函数后会转换为对于的rem

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

.hello{
    width:px2rem(100px);
}

移动端需要在html页面head里面加个meta

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">