推荐vw+rem组合方式的适配方案postcss-px-to-viewport 和 postcss-px-to-rem

postcss-px-to-viewport 和 postcss-px-to-rem 这两个 PostCSS 插件可以同时使用,但需要注意几点:

两者的转换规则不能冲突，即:

postcss-px-to-viewport 只能作用于 width, height, margin, padding 等与视口尺寸相关的属性。
postcss-px-to-rem 只能作用于 font-size, line-height 等与文本相关的属性。

postcss-px-to-viewport 应该放在 postcss-px-to-rem 之前处理。因为:

postcss-px-to-viewport 会生成 vw, vh, vmin, vmax 等视窗单位。
postcss-px-to-rem 会基于根元素字体大小转换 px 为 rem。
如果先执行 postcss-px-to-rem,它会错误地将 postcss-px-to-viewport 生成的视窗单位当作 px 来转换。

需要分别为两者设置不同的配置选项:

postcss-px-to-viewport:设置 viewportWidth, viewportHeight, unitPrecision 等。
postcss-px-to-rem:设置 rootValue, propList, minPixelValue 等。
所以,总体来说,可以同时使用 postcss-px-to-viewport 和 postcss-px-to-rem,但需要确保两者的转换规则不冲突。

postcss-px-to-viewport 要放在 postcss-px-to-rem 之前执行。
分别为两者设置合理的配置选项。

基础配置

`module.exports = { plugins: [ require('autoprefixer'),

require('postcss-px-to-viewport')({
  viewportWidth: 750,     // 视窗的宽度,对应设计稿的宽度
  viewportHeight: ,    // 视窗的高度,对应设计稿的高度，默认可以不设置
  unitPrecision: 3,       // 指定`px`转换为视窗单位值的小数位数
  // propList: ['*'],        // 能转化为vw的属性列表
  viewportUnit: 'vw',     // 指定需要转换成的视窗单位,建议使用vw
  // fontViewportUnit: 'vw', //字体使用的视口单位
  fontViewportUnit: 'rem',
  propList: ['*', '!font-size', '!line-height'],//排除这两项，使用rem单位
  selectorBlackList: [],   //指定不转换为视窗单位的CSS选择器
  minPixelValue: 1,       // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
  mediaQuery: false       // 媒体查询里的单位是否需要转换单位
}),
require('postcss-pxtorem')({
  rootValue: 100, //默认基准值，方便计算==>1rem=100px
  propWhiteList: [],
})

] };`

不指定以下类型的选择器:

第三方 UI 库 / 框架的选择器
比如 element-ui, iview-ui 中的选择器,因为这些库自己已经适配了视窗单位,我们无需再转换。
fixed 定位的选择器
fixed 定位的元素需要相对于视口定位,如果转换单位会造成位置偏移。
1px 边框的选择器
视窗单位在部分机型上不能精确表达 1px,会造成边框模糊。
动画 / 过渡相关的选择器
动画过渡在px与视窗单位之间转换会令动画不流畅。

selectorBlackList: [
  '.el-*',  // element-ui 选择器
  '.ivu-*', // iview-ui 选择器
  '.fixed',
  '.border-1px',
  '.animated'
]

vw px rem之间的换算

假设设计稿是以750px为标准的,那么：
100vw = 750px => 1vw = 7.5x

假设HTML基准为： 1rem = 100px, 那么:
750px=7.5rem = 100vw => 1rem = 100/7.5 =13.333vw

100px = 1rem = 13.333vw
以700视窗大小举例： html的根元素font-size的动态值为：100*(7000/750)=93.3333px

图片.png

可视化大屏如:datav项目，可添加scale一起解决；

图片.png