The first solution is lib-flexible+postcss-pxtorem. For quite a long time, the combination of these two plug-ins is an artifact to solve the layout of the mobile terminal. lib-flexible is an open source library of the Ali Taobao system. font-size, while dealing with some window scaling issues. One of the main contributors is Ali's great god Winter.
The mobile adaptation solution viewport unit is increasingly supported by many browsers. The plug-in postcss-px-to-viewport automatically converts the px unit to the viewport unit.
-
安装 npm install postcss-px-to-viewport --save-dev
yarn add postcss-px-to-viewport -D -
Create postcss.config.js in the project root directory
module.exports = {
plugins: {
autoprefixer: {
},
'postcss-px-to-viewport-opt': {
viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
viewportHeight: 667, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false, // 允许在媒体查询中转换`px`
exclude: /(\/|\\)(node_modules)(\/|\\)/ // 忽略的文件转换
}
}
}