温馨提示：这篇文章已超过662天没有更新，请注意相关的内容是否还可用！
前言
好久没给大家更新文章了。也没什么原因就是比较懒，今天耐着性子要给大家更新一篇关于CSS单位的文章，个人觉得这篇还是比较齐全的。有不足欢迎提出来。
正文
CSS 有几种表示长度的不同单位。
许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。
长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。
这一篇将从四个方面给大家分析CSS单位的选择
1.绝对长度
2.相对长度
3.浏览器的支持情况
4.实例代码解析绝对长度
绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位看输出介质而定，不依赖于情形（显示器、分辨率、操作系统等）。
| 单位 | 描述 | 源自 |
|---|---|---|
| cm | 厘米 | w3school |
| mm | 毫米 | w3school |
| in | 英寸 (1in = 96px = 2.54cm) | w3school |
| px * | 像素 (1px = 1/96th of 1in) | w3school |
| pt | 点 (1pt = 1/72 of 1in) | w3school |
| pc | 派卡 (1pc = 12 pt) | w3school |
相对长度
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。
| 单位 | 描述 | 源自 |
|---|---|---|
| em | 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍） | w3school |
| ex | 相对于当前字体的 x-height(极少使用) | w3school |
| ch | 相对于 "0"（零）的宽度 | w3school |
| rem | 相对于根元素的字体大小（font-size） | w3school |
| vw | 相对于视口*宽度的 1% | w3school |
| vh | 相对于视口*高度的 1% | w3school |
| vmin | 相对于视口*较小尺寸的 1％ | w3school |
| vmax | 相对于视口*较大尺寸的 1％ | w3school |
| % | 相对于父元素 | w3school |
提示：em 和 rem 单元可用于创建完美的可扩展布局！
浏览器的支持情况
| 长度单位 | 铬 | IE | 火狐 | 野生动物园 | 歌剧 |
|---|---|---|---|---|---|
| 全美、ex、%， px， cm， mm， in， pt， pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| 通道 | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| 雷姆 | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| VH， 大众 | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| 维明 | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
| 最大 | 26.0 | 不支持 | 19.0 | 不支持 | 20.0 |
实例代码解析
h1 {
font-size: 60px;}p {
font-size: 25px;
line-height: 50px;}
标红的就是我们要改动的尺寸【根据上面的支持情况来做自适应】
文章版权声明：除非注明，否则均为VPS857原创文章，转载或复制请以超链接形式并注明出处。
还没有评论，来说两句吧...