响应式设计教程

响应式设计是一种网页设计技术，旨在使网页在不同设备上都能提供良好的用户体验。以下是一些关于响应式设计的教程和最佳实践。

响应式设计基础

响应式设计的基础是使用媒体查询（Media Queries）来检测设备的屏幕尺寸，并相应地调整网页布局和样式。

媒体查询语法:

@media (max-width: 600px) {
  /* 当屏幕宽度小于600px时，应用的样式 */
}

使用百分比宽度: 使用百分比宽度可以让布局更加灵活，适应不同屏幕尺寸。
```
<div style="width: 50%;">内容</div>
```

使用Flexbox或Grid: Flexbox和Grid是现代CSS布局技术，可以更方便地创建复杂的布局。

Flexbox:

<div class="flex-container">
  <div class="flex-item">内容1</div>
  <div class="flex-item">内容2</div>
</div>

Grid:

<div class="grid-container">
  <div class="grid-item">内容1</div>
  <div class="grid-item">内容2</div>
</div>

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

使用<img>标签的srcset属性:

<img src="image.jpg" srcset="image-600.jpg 600w, image-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" alt="描述">

使用背景图片:

.background-image {
  background-image: url('image.jpg');
  background-size: cover;
}