[分享]css单位有没有dp

CSS中的单位是指用于定义元素尺寸、位置以及边框等方面的单位。在移动端开发中，我们经常听到的一个单位就是dp，那么CSS有没有这个单位呢？在CSS中，没有一个专门的单位来代表像素密度。但是，我们可以使...

CSS中的单位是指用于定义元素尺寸、位置以及边框等方面的单位。在移动端开发中，我们经常听到的一个单位就是dp，那么CSS有没有这个单位呢？

在CSS中，没有一个专门的单位来代表像素密度。但是，我们可以使用以下三种单位代表像素密度：px、rem和vw。 

1. px（像素）：这是CSS最基础的单位，一般在PC端开发中使用。px是一个固定的单位，每一个像素点都是不可分割的。在不同设备上，一个像素点的物理大小可能会不同。

.box{
  width: 100px;
  height: 100px;
} 

2. rem（根元素大小）：这是相对单位，它是相对于根元素的字体大小（font-size）计算出来的适配单位。rem的一个重要作用就是实现移动端适配。在不同的设备上，根元素字体大小可能是不同的。所以在移动端开发中，使用 rem 可以实现页面的适配。

html{
  font-size: 16px;
}
.box{
  width: 6.25rem; /*100 / 16 = 6.25*/
  height: 6.25rem;
} 

3. vw（视窗宽度百分比）：这也是一个相对单位，表示相对于 viewport（视口/可视窗口）的宽度计算出来的单位。1vw等于视口宽度的1%。使用vw也可以实现简单的响应式布局。

.box{
  width: 50vw; /*视口宽度的50%*/
  height: 50vw;
} 

综上所述，CSS中没有一个专门的单位代表像素密度。但是，通过 px、rem 和 vw 这三种单位的组合使用，我们可以在不同的设备上实现页面的适配。