❓ [适配] 如何适配？

dolymood commented 6 years ago

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

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

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

安装 postcss-px2rem：
```
npm i postcss-px2rem --save-dev
```
修改项目根目录下的 .postcssrc.js 文件，在 plugins 中增加 postcss-px2rem 的配置：
```
{
 "plugins": {
     // ...
     "postcss-px2rem": {
         "remUnit": 37.5
     }
  }
}
```
安装 amfe-flexible 库，用来修改 rem 的值：
```
npm i amfe-flexible --save
```
在入口文件 main.js 中引入 amfe-flexible：
```
import 'amfe-flexible'
```

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

hezhongfeng commented 6 years ago

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

wumiangithub commented 5 years ago

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

Sunrise1970 commented 5 years ago

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

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

dolymood commented 5 years ago

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

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

wangjuanlsx commented 5 years ago

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

yuxingxin commented 5 years ago

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

cube-ui / question-answer

❓ [适配] 如何适配？ #6