Vue用rem布局

boy 火巨

 

 

使用vue.js搭建一个移动端项目，怎样做到自适应呢？当然选择rem布局是比较方便快捷的。

在使用vue-cli搭建好项目框架后，在目录结构的index.html文件中添加一段代码：

<script>

fnResize()

window.onresize = function () {

fnResize()

}

function fnResize() {

var deviceWidth = document.documentElement.clientWidth || window.innerWidth

if (deviceWidth >= 750) {

deviceWidth = 750

}

if (deviceWidth <= 320) {

deviceWidth = 320

}

document.documentElement.style.fontSize = (deviceWidth / 7.5*2) + 'px'

}

</script>

 

之后，在写css时，只要将px单位替换成rem，这里设置的比例是100px=1rem,例如，宽度为100px时，可以直接写成1rem。

 

原文转载 http://blog.51cto.com/13561893/2057430