深入了解 CSS 中的 rem 单位,它是具有良好浏览器支持的相对大小调整的单位,这里来学习如何有效地使用它们。
什么是 rem 单位?
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
根据 W3C 规范,一个对象单位的定义是:
相对于根元素上font-size的计算值。 在根元素的font-size属性中指定时,rem单位是指属性的初始值
这意味着1rem等于html元素的字体大小(对于大多数浏览器而言,其默认值为16px)。
Rem 单位 VS Em 单位
em 单位的主要问题是它们与自己元素的字体大小有关。因此,它们可能会层叠起来并导致意想不到的结果。让我们考虑一下下面的例子,如果根字体大小是默认的16px,我们希望列表的字体大小为12px:
<style type="text/css">
html{
font-size: 100%;
}
ul{
font-size: 0.75em;
}
</style>
<body>
<ul>
你好
<ul>
你好
</ul>
</ul>
</body>
上面可以看到我们本来是想让所有列表的字体大小为 12px,但是如果我们在另一个列表中嵌套了一个列表,那么内部列表的字体大小将是其父列表的75% (在本例中为9px)。
我们仍然可以通过以下方法来解决这个问题:
ul ul {
font-size: 1em;
}
这里是可以解决问题,但是我们仍然必须得非常注意嵌套变得更深的情况。
有了 rem 单位,事情就简单多了:
html {
font-size: 100%;
}
ul {
font-size: 0.75rem;
}
由于所有大小都是根据根字体大小引用的,因此不再需要在单独的声明中覆盖嵌套大小写。
带Rem单位的字体大小
使用rem单位进行字体大小调整的先驱之一是Jonathan Snook,他在2011年5月发表了REM字体大小调整文章。像其他许多CSS开发人员一样,他不得不面对em单位带来的复杂布局问题。
在那个时候,旧版本的 IE 仍然有很大的市场份额,他们不能放大文本的大小与像素。然而,正如我们在前面看到的,使用 em 单位很容易丢失嵌套的轨迹并得到意想不到的结果。
将 rem 用于字体大小调整的主要问题是,这些值有点难以使用。让我们来看一些常见的字体大小的例子,这些字体大小以 rem 单位表示,当然假设基本大小是16px:
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem
正如我们所看到的,这些值对于计算来说不是很方便。出于这个原因,Snook使用了一个叫做“62.5% ”的技巧。无论如何,这并不是一个新发现,因为它已经与em单位一起使用:
body { font-size:62.5%; } /* =10px */由于 rem 单位相对于根元素,Snook 的解决方案变为:
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
html { font-size: 62.5%; } /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
这里可以看到,实际 px 除以10就可以得到 rem大小。这里还必须考虑到其他不支持 rem 的浏览器。因此上面的代码实际上是这样写的:
html {
font-size: 62.5%;
}
body {
font-size: 14px;
font-size: 1.4rem;
}
h1 {
font-size: 24px;
font-size: 2.4rem;
}
尽管此解决方案似乎接近“黄金法则”的地位,但有人建议不要盲目使用它。 哈里·罗伯茨(Harry Roberts)就使用 rem 单位发表了自己的看法。 他认为,尽管62.5%的解决方案使计算更加容易(因为px中的字体大小是其rem值的10倍),但它最终迫使开发人员明确地重写他们网站上的所有字体大小。
但是这也是国内移动端布局最常用的一种方法。
原文链接:https://zhuanlan.zhihu.com/p/290732918
vh和vw
响应式网页设计技术很大程度上依赖于比例规则。然而,CSS比例不总是每个问题的最佳解决方案。CSS宽度是相对于最近的包含父元素。如果你想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样?这正是vh和vw单位所提供的。
vh等于viewport高度的1/100.例如,如果浏览器的高是900px,1vh求得的值为9px。同理,如果显示窗口宽度为750px,1vw求得的值为7.5px。
铺满屏幕的一个例子:
<div class = "div"></div>
.div{
height: 100vh;
width:100vw;
}
但是这样运行出来会出现滚动条,因为整个屏幕的高度还包括了底部工具栏的一个高度,所以会出现比看到的屏幕略大一点,这个时候只要加上个
body{
margin:0;
}
就可以实现满屏效果了