postcss-pxtorem适配平板

postcss-pxtorem是一个PostCSS插件，用于将素单位（px）转换为rem单位，以实现移动端适配。它可以帮助开发者根据设计稿的尺寸自动将像素单位转换为rem单位，并且可以根据不同的屏幕尺寸进行适配。

使用postcss-pxtorem适配平板的步骤如下：

1. 首先，安装postcss-pxtorem插件。可以使用npm或者yarn进行安装：

   npm install postcss-pxtorem --save-dev

或者

   yarn add postcss-pxtorem --dev

2. 在项目的根目录下创建一个postcss.config.js文件，并配置postcss-pxtorem插件。示例配置如下：

   module.exports = {
     plugins: {
       'postcss-pxtorem': {
         rootValue: 16, // 设计稿宽度除以10，例如设计稿宽度为375px，则rootValue为37.5
         propList: ['*'], // 需要转换的属性，这里设置为全部
         selectorBlackList: [], // 需要忽略的选择器，可以使用正则表达式
       },
     },
   };

3. 在项目的构建工具中配置使用postcss-pxtorem插件。具体配置方式根据不同的构建工具而定，例如在webpack中的配置如下：

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

4. 在项目中使用rem单位进行样式编写。postcss-pxtorem插件会自动将像素单位转换为rem单位，根据不同的屏幕尺寸进行适配。

这样，使用postcss-pxtorem插件后，可以方便地进行平板适配，使得页面在不同的屏幕尺寸下显示一致。