rem的实现原理

最新推荐文章于 2024-01-01 11:45:00 发布

QY_NO.1

最新推荐文章于 2024-01-01 11:45:00 发布

阅读量2.8k

点赞数 1

文章标签： html javascript

原文链接：https://www.cnblogs.com/this-xiaoming/p/9056607.html

版权

em和rem在逻辑上的差别仅仅是参照对象不同，em是参照父元素的字体大小，rem是参照根目录HTML的字体大小。

rem布局实际上就是实现等比缩放

试想，如果我们的元素在不同的屏幕上可以按照相同的比例来进行缩放就好了。

rem的计算原理：

试想把屏幕平均分成10份，那么每一份就是1/10，我们选择每一份的大小是1rem，那么一个5*(1/10)的大小就占屏幕大小的50%，这就是rem

我们设计稿的宽度是750px，那么对于设计稿上宽度为600px的一个元素，它的rem值是怎么计算呢？

上面我们把屏幕分成了10份，屏幕宽度就是10rem
设计稿上600px元素在设计稿上占的比例是 600/750，将这个比例应用到屏幕上，屏幕的宽度是10rem，那么，这个元素在屏幕上占用的rem就是 600/750*10rem
所以，公式就是设计稿元素尺寸/设计稿宽度*以rem为单位的屏幕宽度

一般1rem宽度，是html根字体的大小

要根据屏幕大小动态设置跟字体的大小

处理rem布局中的字体

首先针对于文字内容比较多的网页，是不适合用rem布局的，因为这时候大屏的用户可以自己选择想要更大的字体，还是更多的内容，如果使用了rem，这个效果就不可以实现了。所以像是百度知道这种都不行，一些偏向图片内容多一些的例如淘宝，就可以。

但是字体的大小和宽度是不可以用rem来确定的，字体大小和宽度不成线性关系。

解决办法：在body上做修正*

html {fons-size: width / 100}
body {font-size: 16px}

使用实例:

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>rem布局</title>
</head>
<body>
    <noscript>开启JavaScript，获得更好的体验</noscript>

    <div class="p1">
        宽度为屏幕宽度的50%，字体大小1.2em
        <div class="s1">
            字体大小1.2.em
        </div>
    </div>

    <div class="p2">
        宽度为屏幕宽度的40%，字体大小默认
        <div class="s2">
            字体大小1.2em
        </div>
    </div>
</body>
</html>

CSS

html {
    font-size: 32px; /* 320/10 */
}/*针对320屏幕，分成10份*/
body {
    font-size: 16px; /* 修正字体大小 */
    /* 防止页面过宽 ,页面过宽的时候取780居中*/
    margin: auto;
    padding: 0;
    width: 10rem;
    /* 防止页面过宽 */
    outline: 1px dashed green;
}

/* js被禁止的回退方案 ,js被用户禁止的时候，使用媒体查询针对各个屏幕进行设置*/
@media screen and (min-width: 320px) {
    html {font-size: 32px}
    body {font-size: 16px;}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    html {font-size: 48px}
    body {font-size: 18px;}
}
@media screen and (min-width: 641px) {
    html {font-size: 64px}
    body {font-size: 20px;}
}

noscript {
    display: block;
    border: 1px solid #d6e9c6;
    padding: 3px 5px;
    background: #dff0d8;
    color: #3c763d;
}
/* js被禁止的回退方案 */

.p1, .p2 {
    border: 1px solid red;
    margin: 10px 0;
}

.p1 {
    width: 5rem;
    height: 5rem;

    font-size: 1.2em; /* 字体使用em */
}

.s1 {
    font-size: 1.2em; /* 字体使用em */
}

.p2 {
    width: 4rem;
    height: 4rem;
}
.s2 {
    font-size: 1.2em /* 字体使用em */
}

js:

var documentElement = document.documentElement;

function callback() {
    var clientWidth = documentElement.clientWidth;
    // 屏幕宽度大于780，不在放大
    clientWidth = clientWidth < 780 ? clientWidth : 780;//针对例如pc这种屏幕过大的，设置宽度是780，两边居中留空白
    documentElement.style.fontSize = clientWidth / 10 + 'px';//动态设置屏幕大小除以10为根html字体大小。
}

document.addEventListener('DOMContentLoaded', callback);
window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);

步骤总结：

确定设计稿宽度，一般是750px，选取一个手机设备的宽度做基准（例如iphone6 375px, 处理好再拓展其他机型）
限制使用rem布局（因为好多大牛公司都用rem，说明还是又一定的道理的），选取一个font-size的值做基数
按照设计稿上的元素，计算每个元素在界面上的尺寸设计稿标注尺寸/设计稿横向尺寸*10rem = 元素实际rem为单位的css尺寸，这一步不用手动计算，可以通过postcss的px2rem插件计算。
使用js适配各种型号的设备宽度，设置到根html上
(1),动态设置viewport的scale,

var scale = 1/dpr; //dpr是由设备决定的设备像素比

并动态设置meta标签中的各项的值 init-scale = maximum-scale = minimun-scale = scale

document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximun-scale=' + scale + ', minimun-scale=' + scale + ', user-scalable=no');

dpr = 2时， scale = 1/dpr = 0.5;
dpr = 3时，scale = 1/dpr = 0.333…

最后生成的标签是这样

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimun=0.5, user-scalable=no"></meta>

（2），动态计算font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth /10 + 'px';

这里选取将可是窗口宽度分成了10份，每份就是一个rem，所以整个屏幕就是10rem，1rem = 根html font-size的值。

<html data-dpr="2" style="font-size: 75px;">

QY_NO.1

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
rem的实现原理

em和rem在逻辑上的差别仅仅是参照对象不同，em是参照父元素的字体大小，rem是参照根目录HTML的字体大小。rem布局实际上就是实现等比缩放试想，如果我们的元素在不同的屏幕上可以按照相同的比例来进行缩放就好了。rem的计算原理：试想把屏幕平均分成10份，那么每一份就是1/10，我们选择每一份的大小是1rem，那么一个5*(1/10)的大小就占屏幕大小的50%，这就是rem我们设计稿的宽度是750px，那么对于设计稿上宽度为600px的一个元素，它的rem值是怎么计算呢？上面我们把屏幕分成了
复制链接

扫一扫