移动端适配rem方案、postcss-pxtorem+css中二倍图，三倍图的使用

移动端适配通常采用rem单位，并结合postcss-pxtorem插件在编译时自动转换px单位到rem单位。对于不同设备的二倍图、三倍图，可以通过媒体查询来调整html的font-size。

以下是一个基本的示例：

1. 安装postcss-pxtorem:

npm install postcss-pxtorem --save-dev

2. 在postcss配置文件中（如postcss.config.js），添加postcss-pxtorem插件配置：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 假设设计稿宽度为375px，这里的值就是设计稿宽度的1/10
      propList: ['*'], // 转换所有属性
    },
  },
};

3. 在CSS中使用rem单位指定样式：

/* 这将被转换为37.5px */
.element {
  width: 10rem;
  height: 10rem;
}

4. 使用媒体查询来调整html的font-size，实现不同屏幕尺寸的适配：

/* 基础样式，1rem = 37.5px */
html {
  font-size: 37.5px;
}
 
/* 对于双倍宽度的屏幕，1rem = 75px */
@media screen and (min-width: 320px) and (max-width: 599px),
       screen and (min-width: 800px) and (max-width: 1199px) {
  html {
    font-size: 75px;
  }
}
 
/* 对于三倍宽度的屏幕，1rem = 112.5px */
@media screen and (min-width: 600px) and (max-width: 1199px),
       screen and (min-width: 1200px) and (max-width: 1999px) {
  html {
    font-size: 112.5px;
  }
}

使用以上方法，你可以为不同的设备屏幕创建适配的布局，并且使用rem单位保证一致的视觉体验。记得在实际项目中根据设计稿的实际尺寸调整rootValue。