VUE移动端及PC端适配方案

前言

前几天开发公司产品官网的时候，遇到了一些适配问题，当时选择用postcss-px-to-viewport方案来实现适配，效果也很显著，每个页面都适配到位

方案1. 使用PostCss-px-to-viewport插件

step1. vue安装postcss-px-to-viewport插件。

1. 使用npm安装

$ npm install postcss-px-to-viewport --save-dev

2. 或者使用yarn进行安装

$ yarn add -D postcss-px-to-viewport

step2. 配置适配插件的参数

{
      unitToConvert: 'px',            //需要转换的单位
      viewportWidth: 750,           //设计稿的宽度
      unitPrecision: 5,                 //单位转换后保留的精度
      propList: ['*'],         //能转化为vw的属性列表，默认'*'
      viewportUnit: 'vw',              //转换后的视口单位
      fontViewportUnit: 'vw',      //字体使用的视口单位
      selectorBlackList: [],            //忽略的css选择器
      minPixelValue: 1,                //最小的转换数值
      mediaQuery: false,             //是否开启媒体查询
      replace: true,     //是否直接更换属性值，而不添加备用属性     
      exclude: [],          //忽略某些文件夹下的文件或特定文件
      landscape: false,  
      landscapeUnit: 'vw',  //横屏时使用的单位
      landscapeWidth: 750   //横屏时使用的视口宽度
  }

使用PostCss配置文件时，在<u>postcss.config.js</u>添加如下配置：

module.exports = {
  plugins: {
    ...
    'postcss-px-to-viewport': {
          "viewportWidth": 750,
          "minPixelValue": 1,
          "mediaQuery": false,
          "selectorBlackList": ["van", "el"],
          "landscape": true,
          "landscapeUnit": "vw",
          "landscapeWidth": 2048 
    }
  }}

或者在<u>package.json</u>中，添加以下配置：

"postcss": {
    "plugins": {
        "autoprefixer": { },
        "postcss-px-to-viewport": {
              "viewportWidth": 750,
              "minPixelValue": 1,
              "mediaQuery": false,
              "selectorBlackList": ["van", "el"],
              "landscape": true,
              "landscapeUnit": "vw",
              "landscapeWidth": 2048  
        }
     }
  }

说明下几个重要参数的使用：

1. viewportWidth 必填属性，根据UI提供的设计稿宽度定义
2. minPixelValue 必填属性，一般为1
3. selectorBlackList 选填属性，通常情况下，可以忽略一些第三方的UI样式，否则viewport将改变第三方UI样式库的单位值
4. mediaQuery 选填属性，是否开启媒体查询
5. landscape 选填属性，是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
6. landscapeWidth 选填属性，横屏时使用的视口宽度

适配存在的问题点：

1. 如果产品的需求是PC端查看移动端网页时，需要居中显示。
   由于postcss-px-to-viewport的原理是，根据设计稿，把所有试图单位的宽高设置成vw单位，也就是一个比例，那么所有的设备传真实像素进来的时候，会得出真实的px值。
   所以我们PC全屏时，看到的效果是移动端网页充满PC的屏幕宽度，这时候，landscape就可以帮我们解决这个问题了。

   "landscape": true,
   "landscapeUnit": "vw",
   "landscapeWidth": 2048  
   

   landscape参数的作用（上面有解释）。

2. 如果我们引用了第三方UI库，例如element-ui、vant等热门ui被压缩
   selectorBlackList帮我们处理了这个问题。
   只需要将第三方ui的前缀加入到selectorBlackList数组中，例如

   "selectorBlackList": ["van", "el"]
   

   那么postcss-px-to-viewport自动排除这些带前缀的组件

方案2. libflexible和postCss-px2Rem插件配合使用

step1.引入lib-fixible

npm install lib-flexible --save-dev

注：执行指令后在package.json的devDependencies分支可以看到相应的版本，

2. 在main.js中导入lib-fixible.

import 'lib-flexible'

如果未使用vue的伙伴可以直接在前端中直接使用阿里的CDN，如下：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

step2. 引入postcss-px2remnpm

install postcss-px2rem --save-dev

注：此处是postcss-px2rem而不是px2rem-loader,网上很多文章都引用是后者，会导致在配置时候无法成功配置。
在vue.config.js中配置如下配置即可，如未有此文件请自行搜索查询创建配置。

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        // 以设计稿750为例， 750 / 10 = 75
                        remUnit: 75
                    }),
                ]
            }
        }
    }
 };

1. 因为postcss-px2rem是基于px2rem编写的，所以同样也支持px2rem后缀注解方式。

2. 在样式后面添加/no/,即不会将px转成rem。

3. 在样式后面添加/px/,会更加dpr生成三套带px代码,以data-dpr=2为基准

4. 注意：备注前面样式一定要以分号结尾，不然无法被识别。

详情使用查阅px2rem官方说明

埋坑提示:

集成以上两个步骤，基本前端即可根据屏幕自行适配，但可能有部分伙伴会遇到data-dpr始终为1，遇到这个情况多半是因为在html头中自己设置了<meta name="viewport" ...>，

查看lib-flexble做了配置，默认会根据屏幕为我们添加头文件的，如果自行设置，那么只会进行修改设置的值而已，并不会再添加，所以导致data-dpr始终为1，所以把<metaname="viewport" ...>去除.