通用方案1、设置根 font-size:625%(或其它自定的值,但换算规则 1rem 不能小于 12px),我来为大家科普一下关于html怎么调高度最佳?以下内容希望对你有帮助!

html怎么调高度最佳(20rem适配方法如何计算)

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

,