我是否可以使用相对于正文字体大小设置的字体大小?
我知道我可以使用这样的百分比:
body{
font-size: 14px;
}
p{
font-size: 150%;
}
但是这会在嵌套元素上产生不需要的结果,其中font-size相对于父元素:
li{
font-size: 150%;
}
li li{
/* ... */
}
答案 0 :(得分:6)
CSS3引入了rem
(root em),这是html。与设置相对于父字体大小的单位的em不同,rem
将相对于根设置单位。这是关于rem的一篇很棒的文章:>>>CLICK HERE<<<
CSS:
html {
font-size: 14px;
}
p {
font-size: 21px; /*cross browser fall-back hack*/
font-size: 1.5rem; /*same as 150%*/
}
li {
font-size: 21px; /*cross browser fall-back*/
font-size: 1.5rem;
}
li li {
font-size:18px; /*cross browser fall-back*/
font-size: 1.25rem;
}
对于跨浏览器兼容性问题,您可以使用后备同时包含px以获得所需结果。
我正在回复Jukka K. Korpela的评论,因为我认为这与原帖有关。
rem的功能是尝试在整个文档中删除em /%的复合效果(特别是在列表中),并且还获得了px无法获得的弹性。 em /%需要大量的维护,并且随着不断变化的互联网环境,这意味着需要大量的时间。此外,早期IE仍然需要hack来设置基本百分比(最常见的是根[HTML]为100%)然后将父元素设置为必要的大小。但是,这种黑客行为会导致较新的浏览器出现问题,这些浏览器会正确地遵循级联。同样,我的建议是使用rem来实现灵活性和易维护性以及px的后备(对于不支持的浏览器)。
答案 1 :(得分:2)
使用相对值时,例如font-size: 150%;
,这是相对于父元素的。你无法改变它。
例如,如果你有:
<div>
<p id=p1>
<p id=p2>
<p id=p3>
...
使用这个CSS:
div { font-size: 10pt }
p { font-size: 200% }
结果是p1的字体大小为20pt,p2为40pt,p3为8-pt,等等。
你可以通过覆盖所有内容的字体大小来解决这个问题,然后仅对相关元素执行相对字体大小,例如:
* { font-size: 100% }
body { font-size: 10pt }
#p3 { font-size: 150% }
div { font-size: 120% }
但同样,上面示例中的任何元素嵌套(如<div>
)都会导致相对字体大小随着每个嵌套而增大或缩小。
答案 2 :(得分:0)
答案 3 :(得分:0)
如果你想要绝对控制,或者你需要一个完美的像素,那就使用绝对单位这个像素。结果。另一方面,如果字体大小需要根据屏幕大小进行更改,通常会使用相对单位,如 em 或 rem 。它提供了更简单的操作,并且需要更少的媒体查询用法。
em 单位相对于父字体大小,而 rem 单位相对于根元素。
以下是使用 rem 单元的示例:
html { font-size: 100% } //usually this is 16px
p,
div {
font-size: 1rem; //this will equal to 16px
}
section,
article {
font-size: 1.5rem; //this will equal to 24px
}
这里有一篇很棒的文章https://kolosek.com/css-relative-font-size/详细解释了绝对和相对字体大小。