我们有一个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.