rem：我的理解的rem的概念和使用

时间 2019-11-10

标签 rem 我的理解概念使用繁體版

原文原文链接

最近面试问道rem的问题，按照原来的工做经验解答，而后回来从网上搜索了一些关于rem的解释和原理，发现跟本都不是本身想找的那种，就根据本身的理解写了这一边文章，以此记录一下，方便本身查找。若有大神以为个人理解不对，请您指出，万分感谢。

如今开始说说我本身对rem的理解，其实说白了rem也就是在html里面设置一个根字体，而后在用js动态获取设备当前可视区的宽度，在跟设计图作一个除法，最后得出px等于多少rem。javascript

举个板栗：
一、我给页面设置的根字体为20px，假定设计图给个人640尺寸，那我应该怎么一个计算方式。
二、我给页面设置的根字体为20px，假定设计图给个人750尺寸，那我应该怎么一个计算方式。css

一、  20 * document.documentElement.clientWidth /（640/2）= 当前页面根字体大小px。
二、  20 * document.documentElement.clientWidth /（750/2）= 当前页面根字体大小px。

注：我通常简化为html

一、  20 * document.documentElement.clientWidth / 320 = 当前页面根字体大小px。
二、  20 * document.documentElement.clientWidth / 375 = 当前页面根字体大小px。

解释一下:java

我为何用20?
是由于我在Chrome下预览的时候，若是用10去作根字体，那浏览器字体大小只支持到12px，预览的时候会发现出现左右滚动条，影响调试，可是在手机上展现是没有问题的。
为何640要除以2？
这个就要说到设计师给过来的设计图尺寸了，广泛ui给过来的设计图都是二倍图，如640或者750，如今市面上比较流行750。可是在切图的时候，不能就按照设计图的二倍图来切，须要变成一倍图，也就有了640/2或者750/2。
还有一些特殊的设计图尺寸，也就是3倍图。特殊状况特殊处理，跟设计师协商或者本身直接修改均可以，看本身的需求。

上面的理论说完，下面来讲是实践操做。如图：web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="index.css">
    <script>
        document.documentElement.style.fontSize=20*document.documentElement.clientWidth/320+'px';
        window.onresize=function(){
            document.documentElement.style.fontSize=20*document.documentElement.clientWidth/320+'px';
        };
    </script>
</head>
<body>
    <header>
        <a href="javascrpit:;" class="menu"></a>
        <h1>demo</h1>
        <a href="javascript:;" class="pc"></a>
    </header>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: #fff;
}
header{
    width:16rem;
    height:2.3rem;
    background: #262626;
    border-bottom: 0.1rem solid #4bccae;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}
.menu{
    width:1.5rem;
    height:1.2rem;
    background: url(img/menu-bg.png) no-repeat;
    background-size:1.5rem 1.2rem;
    text-indent: -9999em;
    margin-left: 0.4rem;
}
h1{
    font-size: 0.95rem;
}
.pc{
    width:1.5rem;
    height:1.2rem;
    background: url(img/pc-bg.png) no-repeat;
    background-size:1.5rem 1.2rem;
    text-indent: -9999em;
    margin-right: 0.4rem;
}

好了，记录完毕。面试