适配移动端的rem

在做H5页面时，会遇到一个适配的问题，在这里给大家介绍一中方法：

设置viewport的scale值为1.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
根据屏幕的分辨率动态设置html的文字大小，达到等比缩放的功能。

设置rem

function setRem() {
    var scrren = document.documentElement.clientWidth || 320;
    document.getElementsByTagName('html')[0].style.fontSize = scrren / 10 + "px";
};

设置sass

$baseFontSize: 75; //基于视觉稿横屏尺寸/100得出的基准font-size
@function px2rem($px:750) {
    @return $px / $baseFontSize * 1rem;
}

使用

width:px2rem(400);
height:px2rem(300);