vue 中使用rem布局

最新推荐文章于 2022-11-08 20:27:57 发布

云城雪华

最新推荐文章于 2022-11-08 20:27:57 发布

阅读量303

点赞数

文章标签： html5 css3 vue.js es6 node.js

原文链接：https://www.jianshu.com/p/865737c0cde1

版权

vue 中使用rem布局

在用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';
}