移动端rem具体该怎么使用？

最新推荐文章于 2025-10-30 19:38:44 发布

原创最新推荐文章于 2025-10-30 19:38:44 发布 · 798 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#rem #移动端适配 #rem使用图解 #rem用法

移动端同时被 2 个专栏收录

2 篇文章

订阅专栏

Css

2 篇文章

订阅专栏

本文介绍如何利用rem单位实现网页的响应式设计，详细解释了rem单位的特性及其在不同屏幕尺寸上的应用原理，通过调整根元素的字体大小使页面能够适配各种设备。

rem

rem是相对长度单位。
rem会以HTML元素的font-size来设置相对大小。当HTML元素的font-size: 16px时，1rem = 16px, 2rem = 32px。
基于以上特性，我们在拿到固定尺寸的设计稿时，使用rem作为单位即可把页面做到适配其他不同屏幕尺寸机型

原理

以750px设计稿为例，此时的font-size默认为12px、即1rem=12px；所以整个屏幕的宽度换算成rem的话就是 750/12 => 62.5rem；这里个人理解为，把屏幕分成62.5份，每一份占屏幕的1/62.5（1rem = 1/62.5屏幕）；因此当我们以rem为单位时，就相当于以屏幕的百分比为单位了，自然就跟屏幕的大小没有关系了。
当我们的屏幕宽度变为1125px（为了方便计算）的时候，为了达到和750px时的同等视觉效果，也应该想办法让屏幕的宽度变成62.5rem（即要让1rem 变成 1/62.5屏幕宽度 => 根元素font-size 变为1/62.5屏幕宽度）；
计算可得知：1125/62.5 => 18px；所以接下来的任务就是通过js改变font-size的大小为18px；

设置font-size

具体用法，在页面加入下面代码初始化font-size的大小

(function(){
	let idealViewWidth = document.documentElement.clientWidth || document.body.clientWidth;
	const basicvalue = 750; //设计稿尺寸
	document.documentElement.style.fontSize = (idealViewWidth / basicvalue) * 100 + 'px';
})()