postcss-plugin-px2rem 移动端适配原理

postcss-plugin-px2rem是一个PostCSS插件，用于将CSS中的px单位转换为rem单位，以实现适配不同屏幕尺寸的效果。cli3指的是Vue.js的脚手架工具，用于构建Vue项目的基础结构。PC和手机端的配置指的是在使用cli3构建Vue项目时，如何配置postcss-plugin-px2rem插件来处理PC和手机端的样式适配。 首先，需要在package.json文件中添加postcss-plugin-px2rem插件的依赖。 然后，在项目的根目录下，创建一个postcss.config.js的文件，用于配置postcss-plugin-px2rem插件的选项。 配置文件的内容如下： ```js module.exports = { plugins: [ require('postcss-plugin-px2rem')({ remUnit: 75, // rem单位的基准值 exclude: /node_modules/i, // 排除node_modules目录下的文件 mediaQuery: false, // 是否转换@media查询中的px minPixelValue: 2 // 小于指定数值的px不转换为rem }) ] } ``` 在配置文件中，我们设置了remUnit的值为75。这意味着在设计稿中，1px将被转换为0.01333rem（1/75=0.01333）。 我们还设置了exclude选项，用于排除node_modules目录下的文件，因为通常我们不希望对第三方库的样式进行转换。 mediaQuery选项用于确定是否转换@media查询中的px单位。 minPixelValue选项用于确定小于指定数值的px单位是否转换为rem。 最后，在cli3的配置文件vue.config.js中，添加postcss插件的配置，如下： ```js module.exports = { css: { loaderOptions: { postcss: { config: { path: 'postcss.config.js' } } } } } ``` 以上配置将使postcss-plugin-px2rem插件在构建Vue项目时自动应用于CSS文件。 通过以上的配置，我们就可以在cli3构建的Vue项目中使用postcss-plugin-px2rem插件来实现PC和手机端的样式适配了。