rem 是什么?
它的全称是 font size of the root element (根元素的字体大小),
它是 CSS3 中新增加的一个尺寸 (度量) 单位, 根节点 (html) 的 font-size 决定了 rem 的尺寸, 也就是说它是一个相对单位, 相对于(HTML).
rem 是一种相对长度单位. 相对于根元素(即 HTML 元素)font-size 计算值的倍数.
浏览器的默认字体?
浏览器的默认的 font-size 是 16px,1rem 默认就等于 16px.(Chrome 最小字体为 12px)
rem 可以做什么及它的应用场景?
用来做 web App 的屏幕适配, 因为不同手机型号的屏幕大小都不同, 所以这时候我们就不能用 px 来做单位, rem 是适配不同手机屏幕的一种方案.
设置的 font-size 来改变 rem 尺寸
- :root{
- font-size:20px;
- }
- .box{
- width:1rem;
- height:1rem;
- background-color:purple;
- }
将根元素 HTML 的 font-size 设置为 20px, 此时 box 的宽高都为 20px, 也就是 1rem = 20px
示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- CSS 长度单位 rem-CSS 大小 rem 详解
- </title>
- <style>
- HTML,h1{font-size:12px;} p{font-size:2rem;}
- </style>
- </head>
- <body>
- <h1>
- 下面的文字将是 HTML 定义的字体大小的 2 倍:
- </h1>
- <p>
- 我是 HTML 定义的 12px 的 2 倍, 字体大小为 24px
- </p>
- </body>
- </HTML>
效果图:
更多 Web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17841.html