rem：个人理解的rem的概念和使用

最新推荐文章于 2021-11-06 21:38:59 发布

weixin_33712881

最新推荐文章于 2021-11-06 21:38:59 发布

阅读量521

点赞数

文章标签：面试 javascript ui ViewUI

原文链接：https://segmentfault.com/a/1190000013983718

版权

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

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

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

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

注：我一般简化为

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

解释一下:

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

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

<!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;
}

好了，记录完毕。

weixin_33712881

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
rem：个人理解的rem的概念和使用

最近面试问道rem的问题，按照原来的工作经验解答，然后回来从网上搜索了一些关于rem的解释和原理，发现跟本都不是自己想找的那种，就根据自己的理解写了这一边文章，以此记录一下，方便自己查找。如有大神觉得我的理解不对，请您指出，万分感谢。现在开始说说我自己对rem的理解，其实说白了rem也就是在html里面设置一个根字体，然后在用js动态获...
复制链接

扫一扫

rem：个人理解的rem的概念和使用

“相关推荐”对你有帮助么？