❓ [适配] 如何适配？

[dolymood]

我们推荐直接使用 px 的方案来做适配效果，这样的效果就是在小屏幕手机上看到的内容会少一点，在大屏幕手机上看到的内容会多一点，这是一个比较合理的方案。

但是有些情况下，或者设计师、产品要求，我们小屏幕和大屏幕手机上看到的内容是一样多的，那这个时候我们可以选择rem布局的方案，我们的脚手架模板 cube-template 中就内置了一个配置项，是否使用 rem 布局 Use rem layout?，详细参考 https://github.com/cube-ui/cube-template/wiki

如果说你是一个已经初始化了的项目，那么只需要按照如下步骤修改，即可使用 rem 布局：

1. 安装 postcss-px2rem：

   npm i postcss-px2rem --save-dev
   

2. 修改项目根目录下的 .postcssrc.js 文件，在 plugins 中增加 postcss-px2rem 的配置：

   {
     "plugins": {
         // ...
         "postcss-px2rem": {
             "remUnit": 37.5
         }
      }
   }
   

3. 安装 amfe-flexible 库，用来修改 rem 的值：

   npm i amfe-flexible --save
   

4. 在入口文件 main.js 中引入 amfe-flexible：

   import 'amfe-flexible'
   

使用rem/vw布局时: 如果你的 remUnit 不能设置为 37.5，或者 viewportWidth 不是 375，可以使用 postcss-design-convert 插件完成相应转换。

[hezhongfeng]

你好，请问使用px进行适配是什么意思？高度固定吗？我查了一下，好像目前的主流还是使用rem或者vw之类的。

[wumiangithub]

这样只能适配375的设计稿"remUnit": 37.5，如果是750的设计稿"remUnit": 75 样式会被缩小一倍怎么办

[Sunrise1970]

这样只能适配375的设计稿"remUnit": 37.5，如果是750的设计稿"remUnit": 75 样式会被缩小一倍怎么办

您好！我们这边也是用750px的设计稿，使用cube-ui的组件时，会缩小一倍，你们现在怎么处理这个问题呢

[dolymood]

设计稿和采用什么单位适配没什么关系，设计稿是死的，网页部分是活的，不管设计师的尺寸是 750 还是 640 都没有影响，只是涉及到一个书写的计算问题。

cube-ui 是在px和rem之间做的取舍，所以为了兼容两种适配方案，必须做这样的处理。

[wangjuanlsx]

使用 postcss-design-convert 插件转化，没有效果，module.exports = { plugins: { autoprefixer: {}, 'postcss-px2rem': { remUnit: 75 }, 'postcss-design-convert' : { multiple: 2, units: ['rem'], selector: /.cube-ui-/ } } }

[yuxingxin]

@wangjuanlsx 把selector改成/^\.cube-/试试