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

posted @ 2023-06-20 15:31  jialiangzai  阅读(273)  评论(0)    收藏  举报