如何使div块响应？

要使div块响应，可以通过以下几种方式实现：

使用CSS媒体查询：通过设置不同的CSS样式来适应不同的屏幕尺寸和设备类型。可以使用@media规则来定义不同的CSS样式，根据屏幕宽度、高度等属性来应用不同的样式。例如：

@media screen and (max-width: 768px) {
  /* 在屏幕宽度小于等于768px时应用的样式 */
  .div-block {
    /* 样式属性 */
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 在屏幕宽度在769px到1024px之间时应用的样式 */
  .div-block {
    /* 样式属性 */
  }
}

/* 其他屏幕尺寸的样式 */

使用CSS Flexbox布局：Flexbox是一种弹性盒子布局模型，可以轻松实现响应式布局。通过设置父容器的display属性为flex，然后使用flex属性来控制子元素的布局方式。例如：

.div-container {
  display: flex;
  flex-wrap: wrap; /* 当子元素超出容器宽度时换行 */
  justify-content: space-between; /* 子元素水平分布在容器中 */
}

.div-block {
  flex: 0 0 30%; /* 子元素占据父容器的30%宽度 */
}

使用CSS Grid布局：Grid布局是一种二维网格布局模型，可以更灵活地控制元素的位置和尺寸。通过设置父容器的display属性为grid，然后使用grid-template-columns和grid-template-rows属性来定义网格的列数和行数。例如：

.div-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 网格有3列，每列宽度平分 */
  grid-gap: 10px; /* 子元素之间的间距 */
}

.div-block {
  /* 子元素样式 */
}