响应式设计

视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

媒体查询

/* 移动优先设计 */
.container {
  width: 100%;
  padding: 15px;
}

/* 平板设备 */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* 桌面设备 */
@media (min-width: 1024px) {
  .container {
    width: 970px;
  }
}

响应式单位

• rem和em
• vw和vh
• 百分比布局
• calc()函数

响应式图片

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

最佳实践

1. 移动优先设计
2. 断点设置原则
3. 内容优先策略
4. 性能优化考虑