移动端的适配方案之 post-css-to-viewport

最新推荐文章于 2024-08-09 10:08:47 发布

吃番茄

最新推荐文章于 2024-08-09 10:08:47 发布

阅读量784

点赞数

文章标签： javascript vue.js

原文链接：https://www.cnblogs.com/zhangnan35/p/12682925.html

版权

以前的适配方案

const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';

新的是配方案 postcss-px-to-viewport

安装到项目中：

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

在项目根目录下添加.postcssrc.js文件
新的vue脚手架应该会创建 postcss.config.js 文件
添加配置：

module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  }
};

重新运行项目，使配置文件生效

配置注意项

propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: ["*","!letter-spacing"]
selectorBlackList：转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: [‘wrap’],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换

对于一些UI库的兼容问题（这里介绍vant）

vant的默认配置如下 宽带给的是 375

vant官网

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

这里为了兼容自己项目的配置

const path = require('path');

module.exports = ({ file }) => {
  // 这里的 750 根据自己的需求改
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  
  return {
    plugins: {
      autoprefixer: {},
      "[postcss-px-to-viewport](https://www.npmjs.com/package/postcss-px-to-viewport)": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }
}