css px换百分比

CSS中的长度单位有很多种，其中最常用的是px和百分比。在Web开发中，我们常常会用到这两种单位，尤其是在布局中。

px是像素单位，是一个绝对单位，表示一个固定的长度。百分比则是相对单位，表示相对于父元素的长度。

其中，px更为简单直观，也更为准确。但是，使用px在不同的屏幕尺寸下会导致布局错乱的问题。

.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

上面的代码表示一个宽高为200px的盒子，但是如果屏幕尺寸不同，就会出现布局错乱的情况。这时候就可以使用百分比单位来解决这个问题。

.parent {
  width: 100%;
  height: 100%;
  position: relative;
}

.box {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 25%;
  left: 25%;
  background-color: red;
}

上面的代码中，parent的宽高都设置为了100%，然后子元素.box的宽高都设置成了50%，以此来适应不同的屏幕尺寸。

总的来说，我们可以使用百分比单位来实现响应式布局，从而适应不同屏幕尺寸的设备。