css样式怎么解决div盒子宽度随着变化而变化，css样式怎么实现响应式，自适应。

CSS可以通过媒体查询（Media Queries）实现响应式设计，自适应不同屏幕尺寸。使用百分比、vw、vh、flex或grid系统可以让div盒子宽度随着屏幕宽度变化而变化。

以下是一个简单的例子，使用CSS Flexbox来创建一个自适应布局的div容器：

.container {
  display: flex; /* 启用flex布局 */
  flex-wrap: wrap; /* 子元素超出父容器时自动换行 */
  gap: 10px; /* 子元素之间的间隔 */
}
 
.item {
  flex: 1; /* 子元素会均分父容器的宽度 */
  min-width: 150px; /* 最小宽度 */
  max-width: 250px; /* 最大宽度 */
  background-color: lightblue; /* 背景颜色 */
  padding: 10px; /* 内边距 */
}
 
/* 当屏幕宽度小于600px时，所有item占满屏幕宽度 */
@media (max-width: 600px) {
  .item {
    flex-basis: 100%; /* 子元素宽度设置为100% */
  }
}

HTML部分：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

在上述例子中，.container 是一个flex容器，.item 是其子元素。在屏幕宽度大于600px时，.item 会有相同的宽度。当屏幕宽度小于600px时，通过媒体查询，.item 的宽度将自适应屏幕宽度，每个.item 占满一行。