Joh*_*ohn 5 css pixel em font-size
当使用EM单位指定字体大小而不是PX单位时,我在编写可维护的CSS代码时遇到问题.我已经习惯于编写这样的CSS代码:
body {font-size: 12px;}
body .sidebar {font-size:11px;}
body .sidebar .loadmore {font-size:10px;}
body .sidebar .warning {font-size:13px;}
我们的想法是,在整个网站的许多页面上,有很多文本应该有12像素的字体大小.我利用特异性规则来覆盖网站特殊区域的12px字体大小.
假设我把上面的代码重写为:
body {font-size: 12em;}
body .sidebar {font-size:11em;}
body .sidebar .loadmore {font-size:10em;}
body .sidebar .warning {font-size:13em;}
如果我在上面的代码中用em替换px,我的理解是我失去了特异性规则的优势.代码的第3行将被解释为"11 em的12 em的10 em",这与"覆盖所有先前的规则并使用10 em(默认是什么？)"完全不同.我说的是正确的吗？
编辑如果我说的是正确的,那么如何编写字体大小规则,例如"为所有元素使用字体大小X,但在侧栏上使用字体大小Y"？
约翰你所谈论的特殊性将以你所陈述的方式发生.可以看到关于为什么可以看到的参考:http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/.
编辑作为对您的编辑的回复,请考虑jnylen在您原始帖子的评论中发布的内容.
您为body {font-size:12em;}列出的字体大小为12 em,将默认字体大小缩放为当前大小的12倍.如果你想使用em,你需要考虑你希望使用它们的比例,并进行数学运算.如果要使用嵌套语句设置固定大小,则需要坚持使用固定属性(像素).我链接的文章中所述的em的优点是你可以设置一个默认大小,比如12 px,然后用em来缩放它们.例如,在基于移动的网站中.