We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
em是相对于文本字体大小来度量的;rem则是相对于html元素根节点的大小来度量的.
p
h1
<h1>这是一段文字</h1> <p>这是第二段文字</p>
h1 { font-size: 20px; } p { font-size: 2em; /*2em = 32px*/ }
<div> <h1>这是一段文字</h1> <p>这是第二段文字</p> </div>
div { font-size: 18px; /*1em = 18px*/ } h1 { font-size: 20px } p { font-size: 2em; /*2em = 36px*/ }
!important
证明与rem单位不一样,不听从html根节点的
html { font-size: 16px; } div { font-size: 18px; /*1em = 18px*/ } h1 { font-size: 20px } p { font-size: 2em; /*2em = 36px*/ }
h1 { font-size: 2em; /* 1em = 16px */ margin-bottom: 1em; /* 1em = 32px */ } p { font-size: 1em; /* 1em = 16px */ margin-bottom: 1em;/* 1em = 16px */ }
上述h1和p的margin-bottom都是1em,但是外边距的结果值却不相同。上述现象的出现,是因为em是相对于当前元素字体的大小。由于h1中字体大小设置为2em,因此h1中其他属性的1em值就是1em=32px.
h1 { font-size: 2rem; margin-bottom: 1rem; /* 1rem = 16px */ } p { font-size: 1rem; margin-bottom: 1rem; /* 1rem = 16px */ }
1rem总是等于16px(除非html根元素字体大小改变)
究竟是该使用em还是rem呢?答案应该是结合使用em和rem。当属性值的大小需要根据当前元素字体尺寸缩放时,就选用em,其它的情况都使用更简单的rem。
常用字体值表示rem(基本字体尺寸为16px)
10px = 0.625rem 12px = 0.75rem 14px = 0.875rem 16px = 1rem (base) 18px = 1.125rem 20px = 1.25rem 24px = 1.5rem 30px = 1.875rem 32px = 2rem
通过62.5%的设定,就可以很容易用em或者rem来定义具体属性的尺寸了(10倍的关系)。
em
body { font-size:62.5%; } /* =10px */ h1 { font-size: 2.4em; } /* =24px */ p { font-size: 1.4em; } /* =14px */
rem
html { font-size: 62.5%; } /* =10px */ body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */
The text was updated successfully, but these errors were encountered:
No branches or pull requests
普遍原理
em是相对于文本字体大小来度量的;rem则是相对于html元素根节点的大小来度量的.
em
在当em和px单位混用时候
p
元素与h1
元素平级 => em参照16px计算!important
=>div都是em听谁的?
上述h1和p的margin-bottom都是1em,但是外边距的结果值却不相同。上述现象的出现,是因为em是相对于当前元素字体的大小。由于h1中字体大小设置为2em,因此h1中其他属性的1em值就是1em=32px.
rem
1rem总是等于16px(除非html根元素字体大小改变)
使用em和rem
总结
究竟是该使用em还是rem呢?答案应该是结合使用em和rem。当属性值的大小需要根据当前元素字体尺寸缩放时,就选用em,其它的情况都使用更简单的rem。
62.5%
常用字体值表示rem(基本字体尺寸为16px)
通过62.5%的设定,就可以很容易用em或者rem来定义具体属性的尺寸了(10倍的关系)。
em
rem
参考
The text was updated successfully, but these errors were encountered: