rem是什么(一文搞懂)
程序员文章站
2022-04-19 12:34:16
公司新来了一个前端同事,对移动端的自适应布局rem单位还不太了解,网上的资料又太多太杂,于是我准备自己写一篇关于rem的文章。一、需求来源现在做移动端app或者H5,经常会遇到写固定px后,在换了宽度的屏幕上就会变形,于是大家用flex, 或者%布局,能解决部分问题,还是不满足需求呢,rem就上场了。二、rem背景介绍what–是什么?:rem,它是CSS3中新增加的一个尺寸(度量)单位,它的全称是 font size of the root element (根元素的字体大小),它是一个相对....
公司新来了一个前端同事,对移动端的自适应布局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
切换到iphone Plus, 它的屏幕宽度为414px, 他的fontSize就被设置成了55.2px
iphone Plus
所以,以后设计稿来了,一个元素的高度为10px, 我们在CSS代码中就写 0.1rem,就是10px的效果,并且根据手机屏幕宽度自动等比缩放。
本文地址:https://blog.csdn.net/u010463466/article/details/107151622