rem 是 CSS3 新增的一个相对字体长度单位, 只相对根元素即 html 元素字体大小来确定其长度, 是做移动端页面的必不可少的长度单位.
rem 和 em 以同样的方式工作, 但它总是等于默认基础字体大小的尺寸; 继承的字体大小将不起作用, 所以这听起来像一个比 em 更好的选择, 虽然在旧版本的 IE 上不被支持.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- HTML { font-size: 16px; } .div1 { font-size: 3rem; } .div2 { font-size:
- 0.5rem; }
- </style>
- </head>
- <body>
- <div class="div1">
- div1---48px
- <div class="div2">
- div2---8px
- </div>
- </div>
- </body>
- </body>
- </HTML>
效果图:
例子中 HTML 的字体大小为固定大小 16px, 设置 div1 的字体大小为 3rem, 而: 3rem = 16px * 3 = 48px, 所以 div1 的字体大小为 48;
设置 div2 的字体大小为 0.5rem, 而: 0.5rem = 16px * 0.5 = 8px, 所以 div2 的字体大小为 8px.
扩展:
相对单位, 他们是相对于当前元素的字号 ( font-size ) 或者视口 (viewport ) 尺寸.
em: 相对单位. 1em 与当前元素的字体大小相同(更具体地说, 一个大写字母 M 的宽度).
CSS 样式被应用之前, 浏览器给网页设置的默认基础字体大小是 16 像素, 这意味着对一个元素来说 1em 的计算值默认为 16 像素. 但是要小心 - em 单位是会继承父元素的字体大小, 所以如果在父元素上设置了不同的字体大小, em 的像素值就会变得复杂.
来源: http://www.css88.com/qa/css3/13398.html