HTML 响应式设计入门

viewport、媒体查询@media、弹性布局、移动优先 · 难度：入门 · +15XP

响应式设计 — 一个网站在所有设备上都好看

响应式设计让同一个网页在手机、平板、电脑上都能正常显示。

1. Viewport — 视口设置

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

这行代码告诉浏览器："用设备的实际宽度来显示页面"。每个响应式网页都必须加这行。

2. 媒体查询 @media

/* 手机（宽度小于 600px）*/
@media (max-width: 600px) {
  .container { padding: 10px; font-size: 14px; }
}
/* 平板（600-992px）*/
@media (min-width: 600px) and (max-width: 992px) { }
/* 桌面（大于 992px）*/
@media (min-width: 992px) { }

3. 响应式图片

<img src="photo.jpg" style="max-width:100%;height:auto">  <!-- 不会超出容器 -->
<picture><source media="(min-width:800px)" srcset="large.jpg"><img src="small.jpg"></picture>

4. 移动优先原则

先写手机版样式，再用 @media (min-width) 逐步为更大屏幕添加样式。这样性能最好。