在用vue或react等工具搭建一个移动端项目时,怎样做到自适应呢? 当然选择rem布局比较方便快捷. 此处已vue为例,在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:
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'; }然后在写css就可以将px单位换成rem. 这里设置的比例是100px=1rem, 例如:宽度为100px时,可以直接写成1rem
