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) + 'px'

}

</script>


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


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


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭