css3 - 想用rem给width与height进行赋值时，该怎么计算呢？以谁为参照物呢？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css3 - 想用rem给width与height进行赋值时，该怎么计算呢？以谁为参照物呢？

巴扎黑 2017-04-17 11:12:46

[CSS3讨论组]

1283

rem在设置宽度和高度的时候，该怎么进行计算呢？
比如html{font-size: 62.5%;}
那么font-size:2rem;与font-size:20px是一样的
但是width:20rem与width:200px是不一样的。
所以，当想用rem进行width与height进行设置时，该怎么计算呢？以谁为参照物呢？

巴扎黑

全部回复(4)

巴扎黑2017-04-17 11:14:46 4楼

rem用来设置字体大小，也可以用于网格布局。rem中的r代表根元素，它的值就是根元素设置的字体大小。在大多数情况下，根元素就是html了。这个单位可以解决em设置字体时，由于继承带来的问题，具体如下：

body {
    font-size: 14px;
}
p {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

假设html存在这样的结构：

<body>
    <p>
        Test <!-- 14 * 1.2 = 16.8px -->
        <p>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <p>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </p>
        </p>
    </p>
</body>

但是用rem能避免

html {
    font-size: 14px;
}
p {
    font-size: 1.2rem;
}

这样在上面的那三个嵌套的p的字体大小都是 1.2*14px = 16.8px 了。
在布局中，如下：

.container {
    width: 70rem; // 70 * 14px = 980px
}

参考文章

赞 +0

添加回复

巴扎黑2017-04-17 11:14:46 3楼

rem这个单位是相对于根元素的，是可以用来设置width和height的，只是计算的基准是html标签的font-size值，这里建议html的font-size值用px，不要用百分比；不过呢html的font-size最好是通过js来动态计算一个数值:

//- 设置根元素fontSize~
(function (doc, win) {
    var _root = doc.documentElement,
        resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
        resizeCallback = function () {
            var clientWidth = _root.clientWidth,
                fontSize = 20;
            if (!clientWidth) return;
            if(clientWidth < 640) {
                fontSize = 20 * (clientWidth / 320);
            } else {
                fontSize = 20 * (640 / 320);
            }
            _root.style.fontSize = fontSize + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, resizeCallback, false);
    doc.addEventListener('DOMContentLoaded', resizeCallback, false);
})(document, window);

赞 +0

添加回复

伊谢尔伦2017-04-17 11:14:46 2楼

其中的rem原理我就不说了，我想说的就是，rem,真的不能用在height和width中, 在height和width中，一般情况下使用百分比就可以了.
在width里面使用rem的话，你会发现，他计算出来的数值，和你想要的不一样.
举个例子吧:
当你在html里面设置的font-size为10px的话，

html{
    font-size:10px;
}
p{
    font-size:2rem;  //得到的结果是20px 你会微微一笑,艹，你骗我呢. 不急，show u code
}
p{
    height: 2rem;  //这时候，请打开你的控制台，观察p的高度,你会发现是24px;TM!!!怎么不是20px呢
}

原理就是， font-size 对于height 和 width 而言最小值是 12px, 而对于font-size而言，你想设多少，就设置多少。这个无可厚非。
咳咳~~
所以综上所述: 在height 里面一般使用百分比就够了(你整个12px 你自己也不好计算呀,而且如果动态的时候真的给你整个 <12px的，到时候哭都来不及).
在font-size里面，最好就使用rem，因为这个单位是专门为他开发的.

赞 +0

添加回复