高清化方案讨论

[pingan1927]

代码写 rem

• 是否将样式单位切换成rem。
• 假设rem化，约定1rem换算成多少px？
  • AntUI最近实现的代码里约定了1rem=100px。
  • 也有部分实现是约定1rem=页面宽度/10，这是为了以后更好地兼容vw，vh。
  • 今天晚上MR大团队内的代码时，发现有通过mediaQuery设置1rem=18px，1rem=20px等等的。然后业务代码的样式使用rem单位。
  • 也可以约定1rem=16px，这个html是默认的font-size。

还有一个问题，组件代码的1px高清方案是基于initial-scale=1这样的viewport设置的，一旦使用rem，用户可能就会使用initial-scale=1/dpr的高清方案，这个时候，组件的1px可能就变为1/dpr^2了，需要考虑这种情况吗？

关于是否使用rem，1.0版我们总结一个最后方案吧。越早确定约好

代码写 px

按照 750 设计稿的标注写 px ，由工具转换成： https://github.com/ant-tool/postcss-plugin-px2rem ，然后经过一些动态页面设置： http://yiminghe.me/lab/playground/2016-exams/6.html 等比缩放.

[pingan1927]

另外，AntUI目前的1px问题使用的是设置initial-scale=1/dpr这种解决方案，跟antd-mobile不一样了。

[hotoo]

目前团队内部主要还是 1rem = 100px，主要好处是便于换算。

[fangk]

fi/x/issues/113 在内网有撕逼帖.

1rem=100px是现阶段团队内用的最多的. 也就是0.16rem=16px;

antui里是1:200, 也就是0.16rem = 32px; 他们习惯了除以2

[pingan1927]

关于样式，react组件库（antd-mobile）业务开发时有一个纯的样式库依赖（默认antui），也可以引入其它UI依赖，两者能够无缝配合最好。

[yiminghe]

@warmhug @afc163

[afc163]

同意 1rem=100px。

[pingan1927]

那等样式的value都改为变量之后，我来进行切换吧。

方案就是约定1rem=100px。

[warmhug]

我理解是，rem 在业务中适配不同屏幕时比较方便，用 media query 或动态js计算、就能做到只需改变不同分辨率设备下的html font-size 大小就能完全适配，包括 viewport 的缩放也是为了页面看起来高清？但组件库里的代码，有必要都改为 rem 吗？我没找到过别的库有这么做？

[pingan1927]

有必要都改为 rem 吗？我没找到过别的库有这么做？

这是第一个问题要探讨的，是否rem化？

• 部分业务使用rem，那我们提供rem版本是否更好？之所以现在我又提出这个问题，是因为同一个repo的叁儿同学在项目中使用mediaQuery改变html的font-szie，单位使用rem，再将am-开头的设置为黑名单，不做转换，而1rem=18px，所以看有没有必要提供一种一致的单位。
• 如果业务使用px，那我们即使提供rem也没有任何影响。

这有点类似typeScript，提供的是一种能力。

对于是否切换到rem，这个是讨论贴，最后大家统一意见后再着手改代码。

[shepherdwind]

我们如果就内部用，rem 没问题，按照现有的标准就好。但 rem 和 px 完全不兼容的，如果我们的组件需要对外，那么外部用户就得全家桶搞过来，这对业务侵入性还是蛮大的，要统一这样一个比例还是很难的。

我觉得应该保持 rem 和 px 生成的能力，比如通过构建工具或者 less 变量定义的模式。现在可以用 rem 模式，未来高清方案 android 也支持 0.5 px 的实现，那时候应该没必要用缩放了吧。

[shepherdwind]

缩放好像有一个比较致命的缺点，微信不支持缩放，对于外部用户来说，可能还是比较重要的吧。

[yiminghe]

https://github.com/ant-design/ant-design-mobile/issues/78

[yiminghe]

确定，方案2

[dyf2015]

高清方案ios8下无效。。

[pingan1927]

你的viewport这个meta信息必须是通过脚本进行修改，如果html已经写入，需要先删除掉。 @dyf2015

[ghost]

Hello, 用的是 Wiki 的高清方案，同是一样的字体大小，目前测的是 Picker 组件的，发现会模糊，如图：

---

这样就不会模糊：

[warmhug]

@pingan1927 帮 @motorguo 看看

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.