移动 web 端屏幕适配 - rem

时间 2019-11-10

标签移动 web 屏幕适配 rem 栏目无线繁體版

原文原文链接

前言

最近整理了一下之前学习前端的笔记，发现本身对移动 web 端屏幕适配（rem）这一块并无真正理解，只是会用。
接下来，把本身的一些对移动 web 端屏幕适配（rem）的思考记录下来。javascript

rem 介绍

rem 表示根元素（<html>）的 font-size 的大小。即若是根元素的 font-size 大小为 14px，则 1rem = 14pxhtml

rem 适配移动 web 端

适配效果

在不一样尺寸的屏幕下，同一个元素的大小看起来不是同样大的，可是它们所占屏幕宽度的比例是同样的。前端

代码

// 在 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，则在全部尺寸的屏幕上该元素所占屏幕宽度的比例是同样的，所占比例同样，就适配了全部尺寸的屏幕。java

less 代码

如今只须要将设计稿中元素的 px 单位转换为 rem 单位。web

因此，这个时候，咱们能够把设计稿也当成一个具备必定尺寸的手机屏幕。
在我这个例子中，设计稿的宽度为 750px。less

因此，750/15 = 50px，即在设计稿这样尺寸的手机屏幕中，1rem = 50px。学习

而后，在 less 代码中，咱们定义一个变量 @r。
量得 div 的宽度为 100px，由于在设计稿这样尺寸的屏幕中，1rem = 50px，因此该 div 的 rem 的值为：100/50 rem，即 100/@r。
量得 div 的高度为 200px，由于在设计稿这样尺寸的屏幕中，1rem = 50px，因此该 div 的 rem 的值为：200/50 rem，即 200/@r。设计