本文介绍了CSS中的绝对单位如像素和厘米等，以及相对单位如em、rem、vw/vh等，强调了视口单位在响应式设计中的重要性，同时提到了与字体相关的ch和ex单位。
绝对单位
1.px
像素大小，在我们的电子屏幕上，会有一个个的像素格子（每个像素格子里只承载一种颜色，最后组合成像，像素格子的横向数量和纵向数量就是屏幕的分辨率），这个是固定的，1px就是一个像素格子
2.cm(厘米),mm(毫米)，in(英寸),pt(点,1/72英寸),pc(派卡，1/6英寸)
上面都是绝对单位，这些单位在专业的设计类网站运用的较多
相对单位
1.em
一个相对单位，表示当前元素的字体大小。
如果使用em设置当前元素的字体大小，将会使用其父元素作为参照，如果其没有父元素就会使用浏览器的默认大小，也就说说它会逐级从自身向上查找，如果没有找到则使用浏览器默认大小，一般浏览器中默认的字体大小是16px
（这在未设置自身字体大小的情况下，也同样适用）
2.rem（root em）
相对单位，表示根元素（通常是<html>元素）字体大小
3.vw,vh
相对单位，vw表示视口的宽度百分比，vh表示视口高度百分比
4.vmin,vmax
相对单位，vmax表示视口较大值的1%,vmin表示视口较小值的1%
视口较大值：视口宽度和视口高度中的较大值
视口较小值：视口宽度和视口高度中的较小值
5.%
相对单位，表示父元素大小的百分比
在 CSS 中，% 单位的具体含义取决于它被用在哪个属性上。以下是一些常见的例子：
- 当用在
width或height属性上时，%表示的是父元素的内容区域的宽度或高度的百分比。 - 当用在
padding或margin属性上时，%表示的是父元素的宽度的百分比，无论是在垂直还是水平方向上。 - 当用在
font-size属性上时，%表示的是父元素字体大小的百分比。 - 当用在
line-height属性上时，%表示的是当前元素字体大小的百分比。
相对单位，表示当前字体“0”字符的宽度
7.ex
相对单位，表示当前字体的”x”字符高度
上述所说的视口高度和视口宽度可以通过window.innerHeight和window.innerWidth来获取，得到的是像素值。
ch和ex均与字体类型相关的大小，在比较严格的网站排版中起到较大的作用。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
