七个你可能不了解的CSS单位

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位。

随着Web继续的发展,对新的解决方案的需求也会继续增大。因此,作为网页设计师和前端开发人员,我们别无选择,只有去了解我们的工具集并且熟悉它。

这意味着我们还要了解一些特殊的工具-那些不经常使用的,但是当需要它们的时候,它们恰恰是最正确的工具。

今天,我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计量单位,就像像素或者相对单位,但是很可能你从来没听说过它们!让我们一探究竟吧。

rem

我们将从你已经熟悉的东西开始。em单位被定义为当前字体大小。例如,如果你在body元素上设置一个字体大小,那么在body元素内的任何子元素的em值都等于这个字体大小。

<body>
    <div class="test">Test</div>
</body>

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

在这里,我们说这个div将有一个1.2emfont-size。它是所继承的字体大小的1.2倍,在这个例子中为14px。结果为16.8px.

但是,当你在每个元素内都级联em定义的字体大小将会发生什么?在下面的代码片段中我们应用和上面一模一样的CSS.每个div从它们的父节点继承字体大小,带给我们逐渐增加的字体大小。

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

虽然在某些情况下可能需要这个,但是通常你可能想基于一个唯一的度量标准来按比例缩放。在这种情况下,你应该用remrem中的"r"代表"root";这等同于font-size基于根元素进行设置;在大多数情况下根元素为html元素。

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

在上一个示例中三个嵌套的div的字体大小计算结果都为16.8px

对网格布局的好处

rem不是只对定义字体大小有用。比如,你可以使用rem整个网格系统或者UI样式库基于HTML根元素的字体大小上,然后在特定的地方使用em比例缩放。这将带给你更加可预测的字体大小和比例缩放。

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

从概念上讲,像这样一个策略背后的想法是为了允许你的界面随着你的内容按比例缩放。然而,这可能不一定对每个案例都有意义。

"rem(root em)单位"的兼容性列表。

vh和vw

响应式网页设计技术很大程度上

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部