龙空技术网

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

池梓沐 359

前言:

眼前我们对“cssrem宽度”可能比较关心,咱们都需要剖析一些“cssrem宽度”的相关内容。那么小编同时在网络上收集了一些对于“cssrem宽度””的相关内容,希望同学们能喜欢,各位老铁们快快来学习一下吧!

通用方案

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 编辑器插件开发时,单位计算复杂。

标签: #cssrem宽度 #html计算1到100的和 #html1加到100