在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)
}
这样就能在不同的屏宽中自适应了！！！
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容