使用postcss实现移动端响应式单位设置

前言

最近工作中有个移动端的项目是用px布局的，非响应式。要实现单位响应式，大量px布局的样式文件，改rem的话比较麻烦，因此尝试了postCss自动转换响应式单位的方案。

---

一、依赖的npm插件

autoprefixer
postcss
postcss-cssnext
postcss-import
postcss-loader
postcss-modules-values
postcss-px-to-viewport

二、配置postcss.config.js文件

代码如下：项目根目录下新建postcss.config.js并添加如下配置：

module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: [
                'last 20 versions',
                '> 0.1%'
            ],
        },
        'postcss-px-to-viewport': {
            viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750，由于当前项目量取的时候都是除以二的所以此处设置为375
            viewportHeight: 667, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置，由于当前项目量取的时候都是除以二的所以此处设置为667
            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
            selectorBlackList: ['.checkTips', '.bankLogoBgImg'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            mediaQuery: true // 允许在媒体查询中转换`px`
        }
    }
}

三、开发配置新增postcss-loader

在webpack开发配置文件webpack.dev.config.js内新增loader：

module.exports = {
    ...
    module: {
    	...
    	rules: [
    		...
    		{
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                        	...
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            }
		]
    }
}

---

总结

对于移动端项目的自适应单位设置，新搭建的话一般使用rem动态设置根字体的方案。上文所述的方案适用于已经成型的用px布局项目，快速改造成自适应单位。