Mar*_*tin 18
我想知道VW和EM之间的主要区别是什么,因为它们都随着窗口大小而缩放,并且它们都在响应式设计中使用.
大众 - 正如几个人已经正确陈述的那样 - 是视口的百分比宽度.
考虑到小型智能设备通常具有较高的窄视口和较大的视口,笔记本电脑型设备具有更多的信箱形状视口,这个值有可能产生奇怪的,不完美的结果.
EM,是一种与直接父级规则相比较的字体比例的度量.
这里的几个答案似乎在字体大小的定义中产生了一些基本错误.如所述:
em指的是当前的font-size并且相对于它可伸缩.例如,如果文档的字体大小是14px,那么1em = 14px; 2em = 28px等等.
只有当声明的规则1em是文档的直接子节点或者没有应用其他字体缩放规则时,这才是正确的.很容易发生文档的字体大小为14px,子元素的字体大小为2em,然后该子元素的字体大小1em意味着两个子层的字体都显示为28px的字体.
这显然会在创建网站时造成严重的混淆.该EM值仅为父字体大小的比例.举个例子:
html {
font-size:14px;
}
h1 {
font-size:1.5em;
}
p {
font-size:0.9em;
}
main {
font-size:1.15em;
}
.container {
font-size:1.1em;
}
所以,使用HTML:
<html>
<body>
<main>
<div class="container">
<h1>Header</h1>
<p>Some paragraph text</p>
</div>
</main>
</body>
</html>
那么段落内容的字体大小是多少？是0.9 x 14px吗？不,它实际上是
14 x 1.15 x 1.1 x 0.9 = 15.94px
因为每个em只相对于其直接父母.除非您喜欢使用计算器,否则当您处理CSS文件时,这显然是一种非常简单的模糊和隐藏实际值的方法.一个解决方案是使用Root em,这是在html元素标记中设置的根值字体大小rem的em比例.
所以,如果你回到CSS:
p {
font-size:0.9rem;
}
这是因为它被作为在根元素(HTML,定义的字体大小现在将尺寸为14×0.9 不body标签).这是定义比使用的字体大小更清洁的方式只是 EM的.
| 归档时间： |
|
| 查看次数： |
9014 次 |
| 最近记录： |