之前做前端适配，要么通过使用css的media媒体查询，要么通过获取可视宽度按照想要的比例设置文档根字体大小。无意间在网上看到一种新的适配插件，postcss-px-to-viewport，就是用viewport（vw）单位，viewport单位越来越受到众多浏览器的支持，postcss-px-to-viewport，将px单位按照相应的配置自动转换成需要的viewport单位。
使用插件：postcss-px-to-viewport。可使用npm、yarn安装：npm install -D postcss-px-to-viewport 或 yarn add -D postcss-px-to-viewport 。在项目的最外层（即配置文件同级目录下）新建.postcssrc.js文件，在.postcssrc.js文件中加入配置语句，.postcssrc.js更新需要重启才会生效，以下为示例：
module.exports = { plugins: { autoprefixer: {}, // 自动添加相应浏览器前缀，样式兼容，如-webkit-，-moz-等 “postcss-px-to-viewport”: { unitToConvert: “px”, // (String)需要转换的单位，默认为”px” viewportWidth: 750, // (Number)设计稿的视口宽度：可为设计稿的宽度，也可按需自行配置（PC） unitPrecision: 6, // (Number)单位转换后保留的精度，即小数点位数 propList: [“*”], // (Array)指定转换的css属性的单位，*代表全部css属性的单位都进行转换 viewportUnit: “vw”, // (String)指定需要转换成的视窗单位，默认vw fontViewportUnit: “vw”, // (String)指定字体需要转换成的视窗单位，默认vw selectorBlackList: [“demo”], // (Array)需要忽略的CSS选择器，不转为视窗单位，使用原有单位， minPixelValue: 1, // (Number)设置最小的转换数值，默认为1，只有大于1的值会被转换 mediaQuery: true, // (Boolean)媒体查询里的单位是否需要转换单位，默认false replace: true, // (Boolean)是否直接更换属性值，而不添加备用属性 exclude: [/node_modules/], // (Array or Regexp)忽略某些文件夹下的文件或特定文件，用正则做目录名匹配 include: /Ignore.vue/, //(Array or Regexp)只有匹配到的文件才会被转换，那将只有匹配到的文件才会被转换 landscape: false, // (Boolean)是否添加根据 landscapeWidth 生成的媒体查询条件 landscapeUnit: ‘vw’, //(String)横屏时使用的单位 landscapeWidth: 700 //(Number)横屏时使用的视口宽度 } }};
也可在配置文件中进行配置 vue.config.js。
const pxtoviewport = require(“postcss-px-to-viewport”);module.exports = { css: { // 忽略 CSS order 顺序警告 extract: { ignoreOrder: true }, // 适配插件 loaderOptions: { postcss: { plugins: [ pxtoviewport({ // 配置视窗口尺寸 viewportWidth: 1700, unitPrecision: 5, viewportUnit: “vw”, fontViewportUnit: “vw”, selectorBlackList: [], minPixelValue: 1, mediaQuery: true, }), ], }, }, },}
使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）安装： yarn add amfe-flexible 或者 npm i amfe-flexible然后在 main.js 中加载执行该模块：import ‘amfe-flexible’最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化。
使用 postcss-pxtorem 将 px 转为 rem安装：yarn add -D postcss-pxtorem，npm install postcss-pxtorem -D。（ -D 是 –save-dev 的简写。）然后在项目根目录中创建 .postcssrc.js 文件。配置完毕，重新启动服务。
module.exports = { plugins: { ‘postcss-pxtorem’: { rootValue: 37.5, propList: [‘*’] } } }