使用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。