当前位置： 移动技术网 > IT编程>网页制作>CSS > 1篇文章搞懂rem

1篇文章搞懂rem

2020年07月07日  | 移动技术网IT编程  | 我要评论

公司新来了一个前端同事，对移动端的自适应布局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);

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

  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/8在这里插入图片描述

切换到iphone Plus, 它的屏幕宽度为414px, 他的fontSize就被设置成了55.2px
iphone Plus在这里插入图片描述

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网