参考文档

  1. 介绍amfe-flexible
    amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

  2. 介绍postcss-pxtorem
    postcss-pxtorem是postcss的插件，用于将像素（px）单元生成rem单位。

    amfe-flexible结合postcss-pxtorem

    1. npm install amfe-flexible --save
    2. npm install postcss-pxtorem@5.1.1

    在main.js中导入amfe-flexible

    ```javascript import ‘amfe-flexible/index.js’

import ‘./assets/css/media.less’

  1. <a name="hu1vq"></a>
  2. #### 配置文2选1之：postcss.config.js文件
  3. ```javascript
  4. module.exports = {
  5.   "plugins": {
  6.     'postcss-pxtorem': {
  7.       // rootValue: 37.5, // 换算的基数(设计图750的根字体为75)
  8.       rootValue: 192,
  9.       // selectorBlackList: ['.van-'], // 忽略转换正则匹配项
  10.       propList: ['*']
  11.     }
  12.   }
  13. }

配置文2选1之：vue.config.js文件

  1. module.exports = {
  3.     css: {
  4.         extract: true,
  5.         loaderOptions: {
  6.             postcss: {
  7.                 plugins: [
  8.                     require('postcss-pxtorem')({
  9.                         rootValue: 192,
  10.                         exclude: /node_modules\/vant|mobile/i, // 排除mobile和vant库
  11.                         propList: ['*'],
  12.                         selectorBlackList: ['.van-'] // 排除移动端使用了vant库
  13.                     }),
  14.                     require('postcss-pxtorem')({
  15.                         rootValue: 37.5,
  16.                         exclude: 'pc', // 排除pc
  17.                         propList: ['*']
  18.                     })
  19.                 ]
  20.             }
  21.         }
  22.     }
  23. }

媒体查询动态显示

  1. @media only screen and (max-width: 799px) {
  2.   .pc {
  3.     display: none !important;
  4.   }
  5.   .mobile {
  6.     display: block !important;
  7.   }
  8. }
  9. @media only screen and (min-width: 800px) {
  10.   .pc {
  11.     display: block !important;
  12.   }
  13.   .mobile {
  14.     display: none !important;
  15.   }
  16. }