我应该以像素或ems定义CSS边距?为什么?什么时候?

前端之家收集整理的这篇文章主要介绍了我应该以像素或ems定义CSS边距?为什么?什么时候?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们有一个CSS文件,其规则类似于以下内容
.directory-result ul
{
    margin-top: 20px;
    width: 60em;

}

.about-text
{
    margin-top: 1em;
    margin-bottom: 1em;
}

一切正常工作,但我们特别想知道边际值之间的不一致.一个是20px,另一个是1em.

哪个是最好的?在决定使用哪一点时,我应该考虑几点?谢谢.

解决方法

当元素的大小取决于页面的大小时,em单元用于页面的更好的可扩展性.对于旧浏览器(例如IE6)和移动平台尤其重要.

px单位用于绝对值,而em相对于特定元素的字体大小.
1em表示一个字体行,例如你有一个包含font-size 12px的框,这意味着1em将等于12px

此外,使用px似乎更容易,因为您知道确切的值,但是em单位继承其容器的值.

<p>Text</p>
<div class="Box">
  <p>Lorem</p>
</div>

p {
  font-size: 1.2em;
}

.Box {
  font-size: 1.2em;
}

在这种情况下,第一< p>将具有等于基本font-size * 1.2的font-size,而第二个< p>将显示为font-size * 1.2 * 1.2.

原文链接:https://www.f2er.com/css/216468.html

猜你在找的CSS相关文章