css宽百分比高自适应

CSS是前端开发中不可缺少的技术之一。其中，宽百分比高自适应是一个非常实用的特性。它可以使元素按照父元素的大小自动调整自己的大小，从而适应不同的屏幕大小和分辨率。

/* 示例代码 */
.parent {
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
}
.child {
  width: 80%;
  height: auto;
  margin: 0 auto;
}

在上面的代码中，我们定义了一个父元素和一个子元素。父元素的宽度设置为100%，高度设置为200px，并且有一个1px的边框。子元素的宽度设置为80%，高度设置为auto（自动），并且设置了左右居中的外边距。

这样，子元素就可以根据父元素的宽度自适应调整自己的宽度。如果父元素的宽度为800px，那么子元素的宽度就是640px（80% x 800px）。如果父元素的宽度为1200px，那么子元素的宽度就是960px（80% x 1200px）。这样，我们就可以很方便地适应不同的屏幕大小和分辨率，达到更好的用户体验。

需要注意的是，宽百分比高自适应并不适用于所有的元素。比如，对于图片元素，我们需要设置其宽度为100%、高度为auto，并且使用max-width属性来限制其最大宽度，以避免图片变形压缩。

总的来说，宽百分比高自适应是CSS中非常实用的特性，可以方便地实现响应式布局，适应不同的屏幕大小和分辨率。