挪动 web 端显示屏兼容(rem)

序言

近期梳理了1下之前学习培训前端开发的笔记,发现自身对挪动 web 端显示屏兼容(rem)这1块并沒有真实了解,只是会用。

接下来,把自身的1些对挪动 web 端显示屏兼容(rem)的思索纪录下来。

rem 详细介绍

rem 表明根元素(<html>)的 font-size 的尺寸。即假如根元素的 font-size 尺寸为 14px,则 1rem = 14px

rem 兼容挪动 web 端

兼容实际效果

在不一样规格的显示屏下,同1个元素的尺寸看起来并不是1样大的,可是它们所占显示屏宽度的占比是1样的。

编码

// 在 html 文档的 head 标识中
<script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // 获得显示屏宽度(px)
    var hWidth = html.getBoundingClientRect().width;
    // 设定 html 标识的 font-size 尺寸为 hWidth/15
    html.style.fontSize = hWidth/15 + 'px';
  })()
</script>
// 在 less 中
/* 界定自变量@r:750/15 */
@r:50rem; 
div {
  width: 100/@r;
  height: 200/@r;
}

javascript 编码

最先,大家将显示屏的 1/15 尺寸(px)拷贝给 html 标识的 font-size 特性。此时,在任何规格的显示屏上,显示屏尺寸(px)的 1/15 px 都等于 1rem 的尺寸。即:在任何规格的显示屏上,要是给元素设定值同样的 rem,则在全部规格的显示屏上该元素所占显示屏宽度的占比是1样的,所占有率例1样,就兼容了全部规格的显示屏。

less 编码

如今只必须将设计方案稿中元素的 px 企业变换为 rem 企业。

因此,这个情况下,大家能够把设计方案稿也当做1个具备1定规格的手机上显示屏。
在我这个事例中,设计方案稿的宽度为 750px。

因此,750/15 = 50px,即在设计方案稿这样规格的手机上显示屏中,1rem = 50px。

随后,在 less 编码中,大家界定1个自变量 @r。

量得 div 的宽度为 100px,由于在设计方案稿这样规格的显示屏中,1rem = 50px,因此该 div 的 rem 的值为:100/50 rem,即 100/@r。

量得 div 的高宽比为 200px,由于在设计方案稿这样规格的显示屏中,1rem = 50px,因此该 div 的 rem 的值为:200/50 rem,即 200/@r。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。