css的长度单位详解
- 绝对长度单位
- 相对长度单位
CSS 长度单位用于指定数值的大小,例如,用于设置元素的宽度、高度、边距、边框大小等。CSS 长度单位主要分为两类:相对长度单位和绝对长度单位。
绝对长度单位
在 CSS 中,绝对单位是一个固定的值,它反应了一个真实的物理尺寸。它不会受屏幕大小或者字体的影响。它们的大小取决于值以及屏幕的分辨率(DPI,每英寸的点数)。
cm:
厘米,1cm = 37.8px
mm:
毫米,1mm = 3.78px
in:
英寸,1in = 96px。
px:
px 全称为 Pixels,表示像素,它并不严格等于显示器的像素,尤其在高清屏下。尽管CSS单位会根据浏览器、操作系统或者硬件适当缩放,在某些设备或者用户的分辨率设置下也会发生变化,但是96px通常等于一个物理英寸的大小。CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为1px。一个“600x400”解析度的照片的长宽分别为“600px”和“400px”,所以照片本身的像素并不会与显示装置像素一致,而是与 px 单位一致。如此就可以将图像完整的与网页的其它元素排列起来。很多时候, px 也常被称为 CSS 像素。它是一个绝对单位,但也可以被视为相对单位,因为像素单位相对的是设备像素。在同一个设备上,每 1 个 CSS 像素所代表的物理像素是可以变化的;在不同的设备之间,每 1 个 CSS 像素所代表的物理像素是可以变化的。
pt:
pt 全称为 Point,表示点。常用于软件设计和排版印刷行业(笔者做的前端系统,最终的产物就是一个需要拿去印刷的PDF,所以会经常用到这个单位)。当使用这个单位时,无论显示器的分辨率是多少,打印在纸上的结果都是一样的。1pt等于1/72英寸。
如果单纯为了网页的显示,建议就使用px像素单位,如果需要输出印刷产品,就可以考虑使用pt。
pc:
pc 全程为 Picas,表示派卡。相当于我国新四号铅字的尺寸。派卡也是印刷的术语,1派卡等于12点。1pc = 16px
相对长度单位
%:
百分比,百分比单位是相对于父元素的尺寸进行计算的。例如,如果一个元素的宽度设置为50%,那么它的宽度将是父元素宽度的一半。
em:
em单位是相对于元素的字体大小进行计算的。例如,如果一个元素的字体大小设置为2em,那么它的尺寸将是父元素字体大小的两倍。
rem:
rem单位是相对于根元素(即html元素)的字体大小进行计算的。与em不同,rem单位的计算不会受到父元素字体大小的影响。
vw:
视口宽度的百分比,视口是指浏览器窗口或设备屏幕的可见区域。例如,如果一个元素的宽度设置为50vw,那么它的宽度将是视口宽度的一半。
vh:
视口高度的百分比,视口是指浏览器窗口或设备屏幕的可见区域。例如,如果一个元素的高度设置为50vh,那么它的高度将是视口宽度的一半。
vmin:
视口宽度和高度中较小的那个百分比,例如,如果一个元素的高度设置为50vmin,那么它的高度将是视口宽度和视口高度中较小的那个值的一半
vmax:
视口宽度和高度中较大的那个百分比,例如,如果一个元素的高度设置为50vmin,那么它的高度将是视口宽度和视口高度中较大的那个值的一半
除了上述常用的长度单位外,CSS还有一些其他的相对单位和绝对单位,如ex
、ch
等,它们的使用较为有限,一般不常用于布局和尺寸定义。
在实际开发中,选择合适的长度单位取决于具体的需求和设计要求。一般来说,相对单位(如百分比、em、rem等)更适用于响应式布局和移动设备开发,而绝对单位(如像素、厘米等)更适用于固定尺寸的元素和印刷样式的定义。同时,需要注意不同单位之间的换算和兼容性,避免出现尺寸错乱或显示异常的情况。