1篇文章搞懂rem

2024-05-15 10:58

文章标签 篇文章搞懂 rem

本文主要是介绍1篇文章搞懂rem，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

公司新来了一个前端同事，对移动端的自适应布局rem单位还不太了解，网上的资料又太多太杂，于是我准备自己写一篇关于rem的文章。

一、需求来源

现在做移动端app或者H5，经常会遇到写固定px后，在换了宽度的屏幕上就会变形，于是大家用flex, 或者%布局，能解决部分问题，还是不满足需求呢，rem就上场了。

二、rem背景介绍

what–是什么?:

rem，它是CSS3中新增加的一个尺寸（度量）单位，它的全称是 font size of the root element （根元素的字体大小）,它是一个相对单位，相对于(html)。

how—是怎么工作的？:

根据不同手机屏幕宽度来等比缩放web页面元素的大小。

why—为什么不用其他的?:

兼容性比vh,vw要好很多，所以他目前还是前端的宠儿。

在这里插入图片描述

三、具体怎么用操作

其实用起来非常简单，直接复制下面的代码：html页面直接引入一下，就生效了

(function (doc, win) {var UIPageWidth = 750 // UI给的设计稿的宽度，你的设计稿是多少，就写多少;var rate = 100 // 换算比例，这里写100是为了以后好算,比如，一个元素宽度是100px,就可以写为1rem, 即1px=0.01rem。var html = doc.getElementsByTagName("html")[0],// orientationchange->手机屏幕转屏事件// resize->页面大小改变事件(一边pc端有用)reEvt = "orientationchange" in win ? "orientationchange" : "resize",reFontSize = function () {var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;if (!clientW) {return;}html.style.fontSize = rate* (clientW / UIPageWidth ) + "px";}win.addEventListener(reEvt, reFontSize);// DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行doc.addEventListener("DOMContentLoaded", reFontSize);
})(document, window);

总体解释一下上面这段代码：

在DOM文档加载之后就执行，保证执行的时间点最早（DOMContentLoaded）；
html.style.fontSize = rate* (clientW / UIPageWidth ) + “px”;
移动设备屏幕的宽度clientW / UI设计图提供的设计稿的宽度UIPageWidth （一般提供的UI设计稿为 2 倍屏幕的宽度），乘上换算比例为100，设置为100是为了设置成1的倍数好计算，为什么不把html设置为10倍，因为chrome支持的最小字体为12px 。设置这个结果为html根元素的font-size；
手动改变页面宽度，自动重新设置html 的fontSize;

举例：iphone6/7/8的屏幕跨度一般为375px ，我们把上面那段js代码加在页面后，用chrome浏览器打开html页面，发现它的fontSize被设置成了50px
iphone6/7/8 在这里插入图片描述