一, em
1. 元素字体大小 font-size 的单位是 px
em 是常见的相对单位, 它的基准值是当前元素的字体大小. 在 CSS 中 1em 等于当前元素的字体大小, 使用 em 声明的值, 会被浏览器渲染为一个绝对值. 例如:
- <style type="text/css">
- div{
- font-size: 16px;
- height: 2em;
- }
- .box{
- font-size: 12px;
- }
- </style>
- <div class='box'>
- 春水满四泽
- </div>
上例中, 如果 div 没有 box 的类名, 它的高会是 32px, 有了这个类名, 它的高就是 24px.
2. 元素字体大小 font-size 的单位是 em
当元素的 font-size 单位是 em 时, 这时 em 的基准值是元素继承自父元素的字体大小. 例如:
- <style type="text/css">
- body {
- font-size: 16px;
- }
- .box {
- font-size: 1.2em;
- }
- p{
- font-size: 2em;
- }
- </style>
- <body>
- 春水满四泽
- <div class="box"> 夏云多奇峰
- <p > 秋月扬明辉 </p>
- </div>
- </body>
上例中, p 的字体大小是 2 乘以它继承自父元素的字体大小. 父元素的字体大小是 1.2 乘以它继承自 body 的字体大小. 那么, box 的字体大小是 1.216px=19.2px,p 的字体大小是 19.2px2 = 38.4px.
3. 在一个元素内用 em 同时声明 font-size 和其他属性值
对同一个元素的 font-size 和其他属性同时用 em 为单位声明值时, 此时浏览器会先计算出 font-size 的值, 然后基于这个值再去计算其他属性的值. 例如:
- <style type="text/css">
- body {
- font-size: 16px;
- }
- .box {
- font-size: 1.2em;
- }
- p{
- font-size: 2em;
- height: 2em;
- background-color: #ccc;
- }
- </style>
- <body>
- 春水满四泽
- <div class="box"> 夏云多奇峰
- <p > 秋月扬明辉 </p>
- </div>
- </body>
上例中 p 的字体大小是 19.2px2 = 38.4px, 此时其他属性值的 1em 就等于 38.4px, 高则是 38.4px2=76.8px.
4. 问题
当使用 em 声明多层嵌套的元素字体大小时, 要注意 em 的基准值来自父元素的字体大小. 如果子元素的字体大小都用 0.85em, 那里面的元素字体大小是逐级递减的. 例如:
- <style type="text/css">
- body {
- font-size: 38px;
- }
- .box {
- font-size: 0.85em;
- }
- </style>
- <body>
- <ul class='box'>
- <li > 夏云多奇峰 </li>
- <ul class='box'>
- <li > 夏云多奇峰 </li>
- <ul class='box'>
- <li > 夏云多奇峰 </li>
- </ul>
- </ul>
- </ul>
- </body>
5. 获得指定 px 大小的 em 的值
如果已经知道以 px 为单位的基础字号, 想用 em 为单位表示, 计算公式就是: 目标 em 的值 = 目标像素值 / 父元素像素值. 例如, 想要 10px 的字体大小, 父元素的字体大小是 12px, 那 10p 的字体大小用 em 表示就是 10/12 = 0.8333em. 想要 15px 的, 就是 15/12 = 1.25em.
二, rem
rem 与根元素有关联, 不依赖当前元素.
1.rem 作用于根元素
rem 作用于根元素字体大小时, 相对于其出初始字体大小. 大多数浏览器的默认字体大小是 16px, 所以初始字体大小就是 16px.
- html {
- font-size: 2rem
- }
那么 html 的字体大小就是 32px.
2.rem 作用于非根元素
rem 作用于非根元素时, 相对于根元素字体大小. 在文档中的任何地方使用 1.2rem, 浏览器计算的绝对值都是相等的. 例如:
- <style type="text/css">
- body {
- font-size: 16px;
- }
- .box {
- font-size: 2rem;
- }
- .box p{
- font-size: 2rem;
- height: 2rem;
- }
- </style>
- <div class="box"> 夏云多奇峰
- <p > 秋月扬明辉 </p>
- </div>
上例中 p 的高度就是 32px,p 的字体大小和 box 的字体大小一样都是 32px. 如果上例中 rem 都变成 em, 结果就变了 p 的字体继承 box,box 继承 body. 那么 box 的字体大小是 32px,p 的字体大小是 64px,p 的高度是 128px.
3. 使用 rem 布局
使用 rem 布局可以实现等比缩放, 需要设置页面元素 rem 单位的属性, 然后改变 html 元素的字体大小. 可以在 js 中设置, 也可以在 css 中使用媒体查询.
来源: http://www.qdfuns.com/article/46690/5f6cfcd7c02ed184aeeed9ba426000d0.html