vue页面自适应？快使用rem

作为一个前端菜鸡，我已经不是第一次碰到自适应的问题了，ui给1440的图，难道就只适配1440？起码是pc端都要适应，根据盒子的宽高比自适应，我们又不能重新根据窗口大小重新写样式，太太太浪费时间了
这时候我想到了rem，所谓rem是根据html的字体大小计算的，一般浏览器默认html{font-size:16px};也就是说 1rem=16px，那么如果一个盒子在设计图中的尺寸是200px200px，那么这个盒子转换为rem为单位就是（200/16）rem（200/16）rem，到这里还是不能进行适配啊，只能根据浏览器窗口大小改变html的字体大小来保证rem的大小不变，在我们写html时我们的确可以这么干，不过在vue中我们就可以用一些工具。我们可以根据设计图（以1440举例），可以正常使用设计图的尺寸（px），插件可以根据窗口大小自动转换成rem，而且转化成rem的大小在不同窗口下是不变的，所以插件是改变了基准（比如1440时是16px，那么1920时差不多就是21.3px）

先看效果吧（第一张是1440的，第二张是786的）


下面讲讲实现方法

1.首先安装插件
npm install postcss-px2rem px2rem-loader --save

2.写自适应的js
在src中新建utils目录下新建rem.js适配文件，然后在main.js中引用

//rem.js
const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 1440宽的缩放比例，可根据设计图需要修改。
  const scale = document.documentElement.clientWidth / 1440
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

//main.js
import '@/utils/rem'

3.在vue.config.js中配置

//vue.confiig.js

// 引入等比适配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})

// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

4.在组件中使用
在代码中的css

//正常根据设计图写css盒子大小就行，会自动转换成rem
.login-box {
      width: 430px;
      height: 430px;
      background: #ffffff;
      box-shadow: 0px 0px 6px rgba(52, 38, 0, 0.1);
      opacity: 1;
      border-radius: 16px;
      position: absolute;
      right: 230px;
      top: 72px;
      padding: 60px 50px 0;
      box-sizing: border-box;
    }

在F12中的css

5.注意点
（1）我们配置好vue.config.js一定要重启项目才会生效

（2）我们有时候在css中会使用计算（calc），但是在用了插件可能不会生效
正确写法：

height: calc(~"100% - 72px");

（3）记得滚动条也是算宽度的，所以别忘了总体页面的宽度要考虑滚动条的宽度，我当时忘了考虑，为了下面不出现横向滚动条，我是把滚动条宽度置0了，但一样可以滑动向下只是看不到滚动条了（比较省事偷懒的办法）

//App.vue
<style>
::-webkit-scrollbar {
  width: 0;
}
</style>

（4）样式不生效的时侯记得加上!import试试，比如我修改了nprogress进度条的颜色

#nprogress .bar {
  background: #05ae44 !important;
}

（5）写行内样式是不会被转成rem的，如果个别元素不想自适应可以写行内样式，但如果想自适应不要写行内样式

<div style="width:100px;"></div>

（6）某些css样式不想被转换为rem的也不想写行内样式的可以在css的后面加上/no/

padding: 45px 0; /*no*/

就到这里啦，欢迎留言