CSS 响应式设计指南

响应式设计是确保网站在不同设备和屏幕尺寸上都能良好显示的关键技术。本指南将介绍如何使用 CSS 实现响应式设计。

响应式设计的基本概念

响应式设计意味着网站能够根据用户的设备屏幕尺寸自动调整布局和内容。这通常通过媒体查询（Media Queries）来实现。

媒体查询是 CSS3 中的一个功能，允许开发者根据不同的屏幕尺寸应用不同的样式规则。

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

上述代码表示，当屏幕宽度小于或等于 600px 时，页面背景颜色将变为浅蓝色。

Flexbox 是一种用于创建灵活布局的 CSS 模型。它使得创建响应式布局变得更加简单。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px; /* 默认宽度为 200px，可以根据需要调整 */
}

CSS Grid 是另一种用于创建复杂布局的 CSS 模型。它提供了更强大的布局控制能力。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

为了确保图片在不同设备上都能良好显示，可以使用以下方法：

<img src="image.jpg" alt="描述" style="max-width: 100%; height: auto;">

或者使用 CSS：

img {
  max-width: 100%;
  height: auto;
}

更多关于响应式设计的知识，可以参考以下链接：