vue适配pc各屏幕

项目基础配置使用 vue-cli 生成
自适应方案核心： 阿里可伸缩布局方案 lib-flexible
px转rem：px2rem，它有webpack的loader px2rem

npm i lib-flexible
npm i px2rem-loader

然后到main.js引入 lib-flexible

import 'lib-flexible'

接下来需要配置px2rem-loader，找到build/utils.js，在const cssLoader={}后面添加const  px2remLoader 

我这里比较习惯192的，因为设计图为1920*1080的话方便算，本人电脑分辨率也是1920*1080，懒得动脑的缘故吧，有的人是75，纯粹个人习惯(如果设计图是1920*1080的话，要注意换算，因为1920*1080屏幕的浏览器展示高度为940)

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192
      //一个rem==192px
    }
  }

并且放进generateLoaders函数里面的const loaders里

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]

找到node-modules里的lib-flexible下的flexible.js

将原来的width = 540 * dpr;改为width = width * dpr;

var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
     //将原来的width = 540 * dpr;改为
     width = width * dpr;
}

 就大功告成了，现在只需要按照你设计图中组件在ps得出的分辨率长宽度直接输入相对应的数值px，就可以了

 

.box1 {
  height:120px;
  width: 960px;
  background-color: red;
}
.box2 {
  height:120px;
  width: 1920px;
  background-color: blue;
}

窗口化显示自动缩放

测试成功

顺便插一个很实用的小技巧，因为有时候你并不需要它全部适配，所以你会需要页面有固定大小，那怎么办呢

只需要将CSS里面的px写为Px就可以了。