常见问题 #

H5 平台的html {font-size: calc(100vw / 7.5);}是什么意思？ #

construct-scss 模仿了小程序，小程序将视口宽度划分为 750 个单位，因此 construct-scss 的 H5 版本将视口宽度划分为 7.5 个单位。为什么是 7.5，不是 750？

由于浏览器不支持 8px 以下的 font-size，所以，只能选择划分为 7.5 个单位。

想表达font-size: 16px的字，它的 rem 值就是0.32rem，原因是：16px / 50px = 0.32rem。

理解 CSS 分辨率、物理分辨率 #

iPhone 8 的 CSS 分辨率为 375px，物理分辨率为 750px（信息来源Apple.com.cn），CSS 分辨率不要跟设备物理分辨率混淆。

比如 iPhone 8 的物理分辨率是 750px，devicePixelRatio 是 2，那么 CSS 分辨率是 750px / 2 = 375px。

CSS 开发中始终要认定设备宽度是 375px，使用 Chrome 的手机模拟器也是显示 375px。

设计稿要做 750px，因为手机是将 750px 的图压缩到手机上，像素密度更高，为了保证清晰度，还是建议设计稿用 750px。

H5 版与其他 UI 框架的配合注意事项 #

H5 版 construct-scss 所有的长度单位一律用 rem 单位，与 UI 框架配合使用的话，UI 框架必须是使用 px 单位（而不是 rem 单位）的框架。因为如果 UI 框架也使用 rem 单位，那么如果恰好对根元素 font-size 的设定不统一，就会导致错误。除非，恰好 UI 框架也用了html {font-size: calc(100vw / 7.5);}。

好在主流的移动端 CSS 框架和 UI 框架都是使用 px 单位的，比如 Vant，你只需要根据 Vant 的手册，使用插件让 Vant 的 px 转成统一的 rem 即可。

一些团队选择calc(100vw / 3.75)，各有什么优势？ #

主要看哪个方案的心智负担较小。心智负担小的优点以粗体标出。从表格可以看出，还是 7.5 方案心智负担更小，优势更大。

附录：Flex 和 Grid 布局容易混淆的属性对比 #