想问前端大佬问题， iphone7 iphone7p iphoneX 你们是统一字体大小吗？

[MuscleOf2016]

因为现在代码 iphone7 iphone7p iphoneX 的字体大小都是一致的，没有 js 去动态计算。

不过 UI 对这样的效果不满意，UI 用 7 为尺寸设计的 UI 图片，放到 7p 上看，觉得代码实现的页面字体偏小。

我的解释是：7 尺寸的图片到 7p 上会放大，导致看上去字体变大了，代码上字体是写的固定的。

像问问大家，你们 iphone7 iphone7p iphoneX 字体都是一样大的吗，还是代码根据分辨率动态的计算虚啊

[MuscleOf2016]

主要想参考下大家的项目，一般有必要去动态的算吗

[dremy]

css 自适应布局了解一下，rem，vw 作单位可解

[zzeff]

跟设计师沟通清楚展现上的需求就好了。
话说回来设计师应该也要有意识说他的产出物在常见屏幕上的表现应该是怎样的，敝司设计小哥哥就会这么做（长期被他虐，惨。

[iTakeo]

不都是 rem 的吗？

[MuscleOf2016]

@dremy vw 是可以适应，现在用的 rem 7，7p 的根元素大小都 16px 嘛，字体大小都一样的

[MuscleOf2016]

@iTakeo rem 在 7，7p 上计算后的不都是一样的 px，除非手动改根元素 font-size

[MuscleOf2016]

@zzeff 哈哈。

[iTakeo]

@MuscleOf2016 谁说的，7 和 7p 的分辨率都不一样，rem 大小肯定也不一样啊

[MuscleOf2016]

@iTakeo 你们应该是 js 根据分辨率计算 rem 吧，最终算出来的 px 不一样。

[helone]

css 写大小直接用 rem，涉及到布局用 vw

[MuscleOf2016]

@helone 假设 7 和 7p 同一个字体大小 会写一样的 rem 值吗，这样最终计算下来的 px 大小也是一样的。

[MuscleOf2016]

@helone 按我理解因为根元素都是 16px，写一样的 最终字体大小都一样，要想 7p 显示效果好点，7p 上字体 rem 值会比 7 大点，通过 js 计算分辨率。

[helone]

@MuscleOf2016 都用 rem 后根据屏幕宽度或者其他参数计算根元素的 font-size 百分比

[iTakeo]

@MuscleOf2016 不是 js，用 vw 配合 rem 来写的

[redbuck]

@MuscleOf2016

你用 rem 的话,根元素字体大小当然要动态计算啊.
要搞清楚用 rem 实际上就是用百分比,只是比百分比好计算,而且 css 的百分比不统一(比如 padding-top 的百分比是按宽度来算的...).
搞清楚这点了,你说 16/375 会等于 16/414 吗?

最佳实践其实随便百度就有了,你用淘宝的方案就可以.

1. 引用 flexible.js(淘宝是把根元素字体大小设置为 device-width 的十分之一的).最好自己手动加个 device-width=1 的 viewport 标签,统一按 dpr 为 1 计算,1px 的问题很多解.
2. 使用 px2rem 转换你的 css 源码中的尺寸.
2. 设计稿按 ip6,375*667 的来.(蓝湖之类的工具设置一下).