在vue脚手架中封装动态rem 2018-12-26

前提是在vue脚手架中安装Sass

以设计图宽1080px为例

1.在main.js文件中定义方法：

function setRem() {
    var html = document.querySelector('html');//获取html元素
    var w = html.clientWidth;//获取html的宽
    html.style.fontSize = w / 16 + 'px';//设置页面字体大小
};
setRem();//调用
window.addEventListener('orientationchange', setRem);//设备横竖屏切换时
window.addEventListener('resize', setRem);//屏幕大小改时

2.在App.scss中

@function rem($px) {
    @return $px / 67.5 + rem;
}

3.使用 * 在scss文件中

• 例：量得图片img宽为200px

img{
    width: rem(200)
}

这样就能在不同的屏宽中自适应了！！！