一、像素(pixel)
像素是CSS中的基本单位，表示网页上的长度或距离。1个像素等于显示屏上一个点的大小。在CSS中，像素可以用来设置元素的高度、宽度、边框、内边距、外边距、字体大小等属性。
div {
width: 200px; /* 设置宽度200像素 */
height: 100px; /* 设置高度100像素 */
border: 1px solid #ccc; /* 设置边框 */
padding: 10px; /* 设置内边距 */
margin: 10px; /* 设置外边距 */
font-size: 14px; /* 设置字体大小为14像素 */
}
在不同的设备上，像素的实际大小会有所不同，比如在高分辨率的Retina屏幕上，1个像素的大小会比普通屏幕上要小。因此，我们需要使用其他单位来适配不同的设备屏幕。
二、百分比(%)
百分比是相对于其容器元素的长度或高度来计算的单位，在CSS中可用于设置元素的宽度、高度等。例如，可以使用百分比来设置网页布局的宽度，以实现响应式设计。
.container {
width: 80%; /* 设置容器宽度为父元素宽度的80% */
margin: 0 auto; /* 水平居中 */
}
由于百分比是相对于其容器元素的大小计算的，因此在不同的设备屏幕上，元素的大小会随着其父元素的变化而变化。
三、视口宽度和高度(vw和vh)
视口宽度和高度是相对于浏览器窗口的大小来计算的单位，在CSS3中引入。vw单位表示视口宽度的1/100，vh单位表示视口高度的1/100。使用vw和vh可以实现响应式设计，确保元素的大小能随着浏览器窗口的大小变化而变化。
.container {
width: 50vw; /* 设置容器宽度为视口宽度的50% */
height: 50vh; /* 设置容器高度为视口高度的50% */
}
需要注意的是，vw和vh在IE浏览器中的支持度不高，因此在使用时需要注意浏览器兼容性。
四、EM和REM
EM和REM均是相对单位，用于设置字体大小和容器的尺寸。EM单位是相对于父元素的字体大小来计算的，而REM单位是相对于根元素（html元素）的字体大小来计算的。
body {
font-size: 16px; /* 设置根元素字体大小 */
}
.container {
font-size: 1em; /* 设置字体大小为父元素字体大小的1倍 */
}
.box {
width: 10rem; /* 设置容器宽度为根元素字体大小的10倍 */
}
EM和REM可以用于实现响应式设计，同时也有助于提高代码的可维护性。
五、自适应单位
自适应单位是CSS3中引入的相对单位，能够根据屏幕密度和显示屏幕尺寸变化而自动变化。自适应单位主要包括以下三种：
- fr：网格布局单位，代表可用空间的一部分
- ch：字符宽度单位，代表“0”的宽度
- vw、vh、vmin、vmax：视口百分比单位，相对于视口大小计算
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* 设置两列宽度比为1:2 */
}
.box {
width: 20ch; /* 设置容器宽度为20个“0”的宽度 */
}
.element {
width: 50vmin; /* 设置元素宽度为视口宽高中较小的一半 */
}
自适应单位在实现响应式设计时非常方便，同时也可以提高用户体验。
结语
CSS中的单位非常丰富，可以根据实际需求选择合适的单位进行布局和设计。在实际开发中，我们需要根据页面特点和业务需求来选择合适的单位，以实现良好的用户体验。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/159539.html
微信扫一扫 
支付宝扫一扫 