20、rem 适配方法如何计算 HTML 跟字号及适配方案?(必会)

通用方案

1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）

2、通过媒体查询分别设置每个屏幕的根 font-size

3、CSS 直接除以 2 再除以 100 即可换算为 rem

优：有一定适用性，换算也较为简单。

劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法适配。

网易方案

1、拿到设计稿除以 100，得到宽度 rem 值

2、通过给 html 的 style 设置 font-size，把 1 里面得到的宽度 rem 值代入x document.documentElement.style.fontSize =document.documentElement.clientWidth / x + ‘px‘;

3、设计稿 px/100 即可换算为 rem

优：通过动态根 font-size 来做适配，基本无兼容性问题，适配较为精准，换算简便。

劣：无 viewport 缩放，且针对 iPhone 的 Retina 屏没有做适配，导致对一些手机的适配不是很到位。

手淘方案

1、拿到设计稿除以 10，得到 font-size 基准值

2、引入 flexible

3、不要设置 meta 的 viewport 缩放值

4、设计稿 px/ font-size 基准值，即可换算为 rem

优：通过动态根 font-size、viewpor、dpr 来做适配，无兼容性问题，适配精准。

劣：需要根据设计稿进行基准值换算，在不使用 sublime text 编辑器插件开发时，单位计算复杂。