IT编程 > 网页制作 > CSS

rem是什么(一文搞懂)

80人参与2020-07-07

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

您对本文有任何疑问!!点此进行留言回复

推荐阅读

猜你喜欢

rem是什么(一文搞懂)

07-07

CSS浮动的超详细介绍

07-07

小程序如何展示后台编辑好的富文本(文字、图片、视频等)

07-07

《CSS Secrets》css解密(形状、投影视觉效果)

07-07

CSS3-弹性盒子的运用

07-07

CSS 使页面元素隐藏的所有方式汇总

07-07

大家都在看

css3 iphone玻璃透明气泡完美实现

07-25

rem是什么(一文搞懂)

07-07

关于JavaScript基础---(正则表达式/事件监听与绑定)

05-12

css列表滑动防止被底部遮住和适配屏幕长一点的机型处理

07-09

css3中新增的样式使用示例附效果图

11-27

css设置字间距

07-12

Head Html Css 第二版笔记

06-05

遗忘的html标签

07-20

拓展阅读

热门评论