vue项目屏幕自适应（响应式布局）

说起屏幕自适应。大家最先想到的是@media媒体查询和rem的方式。

1，媒体查询

通过媒体查询来得到屏幕的宽度，然后对不同宽度下的屏幕做相应的样式处理。这样确实是能够实现，但是太过麻烦，如果设备较多的话，那可真是遭老罪了

@media only screen and (max-width: 100px) {
    body {
        background-color: #fff;
    }
}
@media only screen and (max-width: 500px) {
    body {
        background-color: #ccc;
    }
}
@media only screen and (max-width: 1000px) {
    body {
        background-color: #ddd;
    }
}

2，rem 布局

rem是弹性布局的一种实现方式,弹性布局可以算作响应式布局一种,但响应式布局不是弹性布局，弹性布局强调等比缩放,100%还原，响应式布局强调不同屏幕有不同的显示，比如媒体查询。
rem 最中要的就是要设置根字体的大小，1rem 就是根字体的大小，所以当我们拿到设计稿的时候，就要通过设计稿去设置根字体的大小。
比如我们拿到的375px宽度的设计稿。那我想把设置成100px=1rem 的话如下面所示。
把这段代码放到main.js中就行了。然后根据设计稿的px去设置，然后在我们样式中写入rem就行了。这样1px = 0.01rem

import Vue from 'vue'
import App from './App.vue'
import router from '../../router'
import store from '../../store'
const  cliWidth =  document.documentElement.clientWidth
document.documentElement.style.fontSize = 100 * (cliWidth/375) + 'px'
window.onresize = function(){
  const  cliWidth =  document.documentElement.clientWidth
  document.documentElement.style.fontSize = 100 * (cliWidth/375) + 'px'
}
Vue.use(toast)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

但是rem也有它的缺点，1，目前 ie 不支持，对 pc 页面来讲使用次数不多；
2.，每次写入的时候我们都要去写成rem，相当麻烦
3，在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。
也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

postcss-px-to-viewport插件

最最推荐的是postcss-px-to-viewport插件插件来进行相应式布局，

我们只需要下载它，然后配置它，在编写代码的时候就可以完全copy设计稿来写。
像rem真是太烦了 还有逐个去改
首先下载

npm install postcss-px-to-viewport --save-dev
yarn add -D postcss-px-to-viewport

然后在根目录下创建postcss.config.js文件，o了 一步到位

module.exports = {
    plugins: {
      'postcss-px-to-viewport': {
        unitToConvert: 'px',  // 需要转换的单位，默认为"px"
        viewportWidth: 1920, //  设计稿的视口宽度
        unitPrecision: 5, // 单位转换后保留的精度
        propList: ['*'], // 能转化为vw的属性列表
        viewportUnit: 'vw', //  希望使用的视口单位
        fontViewportUnit: 'vw', // 字体使用的视口单位
        selectorBlackList: [], // 需要忽略的CSS选择器 '.el','el'
        minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换
        mediaQuery: false, // 媒体查询里的单位是否需要转换单位
        replace: true, // 是否直接更换属性值，而不添加备用属性
        exclude: [/node_modules/,/\/pages\/mobile\//], // 忽略某些文件夹下的文件或特定文件
        include: undefined,  // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
        landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
        landscapeUnit: 'vw' // 横屏时使用的单位
      }
    }
  }

就不需要其他操作了，样式完全自适应屏幕的