实习随笔-11、Vue实现PC端自适应方案

一、安装

npm i  lib-flexible -S

npm i px2rem-loader -D

npm i postcss-plugin-px2rem

二、进入node_modules,打开lib-flexible/flexible.js，修改 refreshRem()函数，如下

if (width / dpr > 1920) {
            width = 1920 * dpr;
        }
        if (width / dpr < 1300) {
          width = 1300 * dpr;
      }

因为我的设计稿宽度是1920，所以就把450改成了1920，width / dpr < 1300是因为我只是适配PC端，所以就用了1300，如果要适配移动端，可以把这个值改小一点，例如改成450

三、配置vue.config.js

注：没有vue.config.js请在项目根目录下创建

module.exports = {
 css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 192, // 换算基数,默认为100
            exclude: /(node_module)/, // 默认false, 可以用正则表达式排除某些文件的转换
            mediaQuery: false, // 允许在媒体查询中转换px
          })
        ]
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .use('px2rem-loader')
      .loader('px2rem-loader')
      .options({
        remUnit: 192,
        remPrecision: 8
      })
      .end()
}

四、效果演示

重新运行项目，打开页面即可看到页面自适应的效果