欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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要好很多,所以他目前还是前端的宠儿。

rem是什么(一文搞懂)

三、具体怎么用操作

其实用起来非常简单,直接复制下面的代码: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);

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

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

举例:iphone6/7/8的屏幕跨度一般为375px ,我们把上面那段js代码加在页面后,用chrome浏览器打开html页面,发现它的fontSize被设置成了50px
iphone6/7/8rem是什么(一文搞懂)

切换到iphone Plus, 它的屏幕宽度为414px, 他的fontSize就被设置成了55.2px
iphone Plusrem是什么(一文搞懂)

所以,以后设计稿来了,一个元素的高度为10px, 我们在CSS代码中就写 0.1rem,就是10px的效果,并且根据手机屏幕宽度自动等比缩放。

本文地址:https://blog.csdn.net/u010463466/article/details/107151622