响应式布局从入门到实战

现在网站都要在手机、平板、电脑上正常显示，响应式布局是前端基本功。

三个核心工具

• 媒体查询 @media：针对不同屏幕宽度写样式
• Flexbox：一维布局利器
• Grid：二维布局首选

移动优先

先写手机端样式，再用 @media 逐步增强到大屏，代码更清晰。

/* 手机端默认 */
.container { padding: 16px; }

/* 平板及以上 */
@media (min-width: 768px) {
  .container { padding: 32px; }
}

常用断点

768px（平板）、1024px（笔记本）、1200px（大屏）是常用的分界线。