移动 web 端屏幕适配(rem)

q77617 · 发表于 2024-4-20 10:32:14

前言
最近整理了一下以前学习前端的笔记，发现自己对移动 web 端屏幕适配（rem）这一块并没有真正理解，只是会用。
接下来，把自己的一些对移动 web 端屏幕适配（rem）的思考记录下来。
rem 介绍
rem 表示根元素（<html>）的 font-size 的大小。即如果根元素的 font-size 大小为 14px，则 1rem = 14px
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，则在所有尺寸的屏幕上该元素所占屏幕宽度的比例是一样的，所占比例一样，就适配了所有尺寸的屏幕。
less 代码
现在只需要将设计稿中元素的 px 单位转换为 rem 单位。
所以，这个时候，我们可以把设计稿也当成一个具有一定尺寸的手机屏幕。
在我这个例子中，设计稿的宽度为 750px。
所以，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。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

龘龘龘爨 · 发表于 2024-4-23 08:14:33

谢谢你的提醒，我会注意的。

万物的操纵者 · 发表于 2024-4-27 15:52:43

已测试，非常不错

坑比中的大神 · 发表于 2024-4-28 00:41:44

你的信息来源是？我想了解更多。

醉眼朦胧哀叹 · 发表于 2024-5-17 18:13:49

牛逼

皮皮虾Fuck007 · 发表于 2024-6-9 07:08:20

顶一个，观点非常中肯！

Trunk1s · 发表于 2024-7-21 23:10:19

好用好用

美味咸鱼- · 发表于 2024-8-30 22:39:35

你的信息来源是？我想了解更多。

清清 · 发表于 2024-10-6 10:10:40

我不确定这个信息的准确性，请再确认一下

Diane怪叔叔 · 发表于 2024-11-15 18:44:24

让我们一起努力

		自动登录	找回密码
密码			立即注册