响应式：变形金刚

无论是巨幕还是手机，你的网页都要完美适配。

1. 什么是响应式？

以前的网页像一张固定的海报，在手机上看必须放大缩小，用户体验极差。响应式设计（Responsive Design）让网页像水一样，倒入什么容器就变成什么形状。

桌面电脑

平板

手机

2. 视口元标签 (Viewport Meta)

这是开启响应式魔法的钥匙！如果没有它，手机浏览器会假装自己是电脑屏幕，然后把网页缩得很小很小。

🚨 必须写在 <head> 里！🚨

width=device-width: 告诉浏览器，网页宽度 = 设备屏幕宽度。
initial-scale=1.0: 初始缩放比例为 1:1，不要自动缩放。

3. 简单技巧

即使不会写复杂的 CSS 媒体查询，你也可以做一些简单的适配。

❌ 错误做法

使用固定宽度：

width: 1000px;

手机上会出现横向滚动条，丑爆了！

✅ 正确做法

使用百分比或最大宽度：

width: 100%;
max-width: 1000px;

大屏不超过1000px，小屏自动占满，完美！

4. 响应式图片

你可以给不同的屏幕提供不同的图片，节省流量。

<picture>
  <source media="(min-width: 650px)" srcset="big-img.jpg">
  <source media="(min-width: 465px)" srcset="medium-img.jpg">
  <img src="small-img.jpg" alt="Flowers">
</picture>
        

浏览器会根据屏幕大小，自动选择一张图片加载。智能吧？

🔙 上一关下一关：黑客帝国 💻