css3通过什么实现响应式布局

CSS3 是网页布局的核心技术，它的出现让网页设计变得更加简单、优雅、美观。那么，CSS3 是如何实现响应式布局的呢？

@media (max-width: 768px) {
  /* 在屏幕宽度小于等于 768 像素时的样式 */
  body {
    background-color: lightblue;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 在屏幕宽度在 769 到 1024 像素时的样式 */
  body {
    background-color: lightgreen;
  }
}

@media (min-width: 1025px) {
  /* 在屏幕宽度大于等于 1025 像素时的样式 */
  body {
    background-color: lightpink;
  }
}

上述代码中，我们使用了 @media 查询语句指定不同屏幕宽度下的样式。其中，min-width 和 max-width 分别表示屏幕宽度的最小值和最大值。

当屏幕宽度小于等于 768 像素时，页面背景颜色为浅蓝色；当屏幕宽度在 769 到 1024 像素之间时，页面背景颜色为浅绿色；当屏幕宽度大于等于 1025 像素时，页面背景颜色为浅粉色。

通过 @media 查询语句，CSS3 实现了响应式布局。它能够根据屏幕宽度的不同，调整页面的样式和布局，使得在不同设备上的显示效果均能达到最佳的效果。