用css和媒体查询做移动端适配

在CSS中，为了实现移动端适配（Responsive Web Design），我们通常会利用媒体查询（Media Queries）。媒体查询是一种CSS技术，它允许我们在不同的设备视口尺寸下应用不同的样式规则。以下是几个关键点：

1. **设置断点**：定义一些关键的屏幕宽度作为断点，比如`手机（<600px）、平板（600px - 900px）、桌面（>=900px）`。

2. **编写媒体查询**：对于每个断点，你可以编写一段独立的CSS，如：

   @media (max-width: 600px) {
     /* 手机端样式 */
     body { font-size: 14px; }
     .header { padding: 10px; }
   }

   @media (min-width: 601px) and (max-width: 900px) {
     /* 平板端样式 */
     body { font-size: 16px; }
   }

   @media (min-width: 901px) {
     /* 桌面端样式 */
     body { font-size: 18px; }
   }

3. **流式布局**：使用百分比、em单位等响应式布局技术，让元素宽度随容器调整。

4. **图片优化**：考虑使用srcset属性或者picture标签提供不同分辨率的图片，适应不同屏幕大小。

5. **触控优化**：针对触摸设备添加适当的行为，如点击区域更大、按钮间距更合理等。