postcss-pxtorem 兼容pc端和移动端

postcss-pxtorem是一个PostCSS插件，用于将像素单位转换为rem单位。它可以帮助我们在开发过程中实现自适应布局，同时兼容PC端和移动端。

在PC端和移动端中，屏幕的尺寸和像素密度是不同的，因此需要使用不同的rem基准值来适配不同的设备。postcss-pxtorem可以根据配置的rem基准值自动将像素单位转换为rem单位。

在使用postcss-pxtorem时，我们需要配置一些参数来实现兼容性：

1. rootValue：设置基准值，即1rem对应的像素值。在PC端中，通常设置为设计稿的宽度除以10，例如设计稿宽度为1920px，则rootValue为192。
2. unitPrecision：设置转换后的rem值保留的小数位数，默认为5。
3. propList：设置需要转换的属性列表，默认为['*']，表示所有属性都会被转换。
4. selectorBlackList：设置不需要转换的选择器列表，默认为空数组。可以通过正则表达式来匹配选择器。
5. replace：设置是否替换原始的像素值，默认为true，即替换。

使用postcss-pxtorem可以方便地实现PC端和移动端的兼容性布局。在PC端中，使用px作为单位；在移动端中，使用rem作为单位，并根据不同设备的屏幕尺寸和像素密度进行自适应。

相关问题

vue2使用postcss-pxtorem让移动端兼容pc端

Vue 2中使用PostCSS-pxtorem插件是为了实现像素单位（px）到相对单位（如rem）的转换，从而提高响应式设计的灵活性，使得在移动端和PC端都能保持一致的样式。这样做有助于在不同屏幕尺寸上保持良好的可读性和布局一致性。

以下是使用PostCSS-pxtorem在Vue项目中设置和应用的步骤：

1. **安装依赖**：
在`package.json`中运行`npm install postcss-loader postcss postcss-pxtorem --save-dev` 或者 `yarn add postcss-loader postcss postcss-pxtorem --dev`。

2. **配置postcss**：
在`vue.config.js`（对于Vue CLI 3及以上版本）或`.postcssrc.js`（对于Vue CLI 2）中添加PostCSS配置。例如：

   // vue.config.js
   module.exports = {
     configureWebpack: {
       module: {
         rules: [
           {
             test: /\.css$/,
             use: ['style-loader', 'css-loader', {
               loader: 'postcss-loader',
               options: {
                 plugins: [
                   require('postcss-pxtorem')({
                     rootValue: 100, // 选择一个基准值，通常是你设计稿的视口宽度
                     unitPrecision: 5, // 小数位数
                     propWhiteList: [], // 只转换某些属性，防止意外影响
                     selectorBlackList: /html|body/, // 不转换某些选择器
                   }),
                 ],
               },
             }],
           },
         ],
       },
     },
   };

3. **应用到组件中**：
在你的CSS文件中，原本使用`px`的样式会自动转换为`rem`。比如：

   .button {
     width: 100px; // 这将被转换为 10rem，前提是根值(rootValue)设置为100px
     padding: 16px; // 也会相应转换为 rem 值
   }

pc 端使用 postcss-pxtorem 做自适应，到 移动端字体变小

PC端使用PostCSS px to rem插件将像素单位转换为相对单位（如rem），可以方便地实现响应式设计，让页面元素随视口尺寸的变化而调整大小。当把样式应用到移动端时，如果根元素`html`的font-size值设得较小（默认情况下，移动设备的初始`font-size`可能会小于pc端），字体和其他基于rem单位的尺寸就会相应减小。

例如，在PC上可能设置了一个20px的字体大小，转换成rem就是`20rem`。但在移动端，如果`html`的`font-size`为16px，那么20rem将会等同于`320px`，这就导致了字体比预期的小很多。

解决这个问题通常有几种方法：

1. **动态设置font-size**: 可以通过媒体查询检测设备宽度，然后动态计算并设置`html`的`font-size`，使之在适配不同屏幕尺寸时保持合理的字号比例。

/* 使用postcss-pxtorem处理 */
@media (max-width: 750px) {
  html {
    font-size: 14px; /* 或者其他适合移动端的数值 */
  }
}

/* 直接设置rem单位 */
body {
  font-size: calc(20rem / 14);
}

2. **使用vw或vh单位**：这些视窗宽度或高度百分比单位更适合用于响应式布局，它们会自动根据设备窗口大小缩放。

3. **保留基础字体大小并使用em**：虽然不是直接依赖于px到rem的转换，但可以保证字体大小在整个布局中相对一致。

body {
  font-size: 16px;
  .some-text {
    font-size: 1.2em; /* 文字大小是父元素的一半 */
  }
}