vue中使用rem布局

转自https://www.cnblogs.com/xiaoxiaoxun/p/11147097.html

使用的是vue-cli4

方式一：

在public下的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

 

方式二：

首先安装amfe-flexible插件，在main.js里引入

1、npm i amfe-flexible

2、import 'amfe-flexible'

然后再，安装postcss-px2rem插件

npm i postcss-px2rem

在package.json中配置

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem": {
        "remUnit": 37.5
      }
    }
  }

在.vue文件里。样式直接写px单位就可以了。在浏览器查看时会自动转换为rem单位。如果字体还想用px。那就这样将px大写。就不会编译为rem单位了。样式就可以实现px。