postcss-px-to-viewport移动端新适配方案

之前移动端项目一直用的是pxtorem来实现适配的，但是发现在某些情况下，rem布局会错乱，然后在vant（一款移动端ui框架）给的demo里面发现了这个宝藏插件。

1. 简介

postcss-px-to-viewport的原理其实就是把你设置的以px为单位的css属性转换为相应的视口单位。

而视口就是你的浏览器实际显示内容的区域——换句话说就是你的不包括工具栏和按钮的网页浏览器。这些单位分别是 vw 、 vh 、 vmin 和 vmax 。它们都代表了浏览器（视口）尺寸的比例和窗口大小调整产生的规模改变。

  • vw：viewpoint width，视窗宽度，1vw=视窗宽度的1%。
  • vh：viewpoint height，视窗高度，1vh=视窗高度的1%。
  • vmin：vw和vh中较小的那个。
  • vmax：vw和vh中较大的那个。

所以页面宽高也可以用height：100vh，width：100vw来表示，等同于height：100%，width：100%。

2. 安装

目前开发主要基于vue，所以以vuecli为例

1
2
npm install postcss-px-to-viewport --save-dev
# cnpm install postcss-px-to-viewport --save-dev

3. 配置和使用

vuecli3以上在新建项目的时候会在根目录生成一个和vue.config.js同级postcss.config.js的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const autoprefixer = require('autoprefixer')
const pxtoviewport = require('postcss-px-to-viewport')

module.exports = {
    plugins: [
        autoprefixer(),
        pxtoviewport({
            viewportWidth: 750, // 设计稿宽度
            viewportHeight: 1334, // 设计稿高度，可不配置，默认使用vw为单位
            unitPrecision: 3, // 指定 `px` 转换为视窗单位值的小数位数
            viewportUnit: "vw", //指定需要转换成的视窗单位，建议使用vw，不加此选项默认使用vw
            selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的class类样式，可以自定义，可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1, // 小于或等于 `1px` 不转换为视窗单位，你也可以设置为你想要的值
        })
    ]
}

如果没有生成postcss.config.js文件，也可在vue.config.js里面配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtoviewport({
                        viewportWidth: 750, // 设计稿宽度
                        viewportHeight: 1334, // 设计稿高度，可不配置，默认使用vw为单位
                        unitPrecision: 3, // 指定 `px` 转换为视窗单位值的小数位数
                        viewportUnit: "vw", //指定需要转换成的视窗单位，建议使用vw，不加此选项默认使用vw
                        selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的class类样式，可以自定义，可以无限添加,建议定义一至两个通用的类名
                        minPixelValue: 1, // 小于或等于 `1px` 不转换为视窗单位，你也可以设置为你想要的值
                    })
                ]
            }
        }
    }
};

配置好就完工啦，可以通过浏览器查看元素确认一下有没有配置成功, 然后就可以根据设计稿进行开发啦

demo