vueCli3下pc多分辨率自适应解决方案

!注意仅为适应各种分辨率屏幕,不包含平板以及移动设备。单纯做移动设备响应适配请移步到flexible+px2rem 解决方案

vueCli3下自适应解决方案

postcss-plugin-px2rem

  • 将css中px转换为rem
  • 安装命令 npm i -S postcss-plugin-px2rem
  • 项目根目录下新建 vue.config.js 配置文件
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-plugin-px2rem")({
            rootValue: 192, //设计稿宽度/10
            exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
            // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
            // mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
            // minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ],
      },
    },
  },
};
  • 在src目录下新建rem.js文件
export function setRemInit() {
  // postcss-px2rem的内容
  // 基准大小
  const baseSize = 192;
  // 设置 rem 函数
  function setRem() {
    // 当前页面宽度相对于 1920 px(设计稿尺寸)的缩放比例,可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = `${baseSize * scale}px`;
  }
  // 初始化
  setRem();
  // 改变窗口大小时重新设置 rem
  window.addEventListener("resize", setRem);
}

在main.js中引用rem.js


import { setRemInit } from '../src/rem';

setRemInit(); *//进行初始化立即运行*

Leave a Reply