如何使div块响应？

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

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

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

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

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

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

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