文章介绍了Web设计中17种不同的尺寸单位，包括百分比、像素、英寸等，以及相对单位em、rem的概念。em基于父元素字体大小，rem基于html根元素字体大小，px为绝对单位。文章还讨论了vh、vw、vmin、vmax等视口相关单位和ex、ch等特殊单位的使用。此外，提到了浏览器对rem的支持情况。
一.总共列了 17 个单位
- 百分比、cm 厘米、mm 毫米、px 像素（计算机屏幕上的一个点）、in 英寸、pt 磅 rgb(x,x,x) rgb(x%,x%,x%) #rrggbb（十六进制）
- em：1em 等于当前字体尺寸（继承父元素的字体尺寸）
- rem：r 为 root，1rem 等于根元素字体尺寸（继承 html 的字体尺寸）
- vh：1vh 等于可视窗口高度的 1/100
- vw: 1vw 等于可视窗口宽度的 1/100
- vmin：可视窗口宽高更小的值的 1/100
- vmax：可视窗口宽高更大的值的 1/100
- ex：当前字体的一个 x-height，一般为当前字体的一个 em 的一半，因为一个 'x' 字母一般为字体大小的一半
- ch：设置 width:40ch 表示这个宽度可以容纳 40 个特定字体的字符
二.em\px\rem区别
- px：绝对单位，页面按精确像素展示。
- em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
- rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
