让网页像水一样流动：响应式设计与媒体查询

• 生活中的例子 01

在线购物：在电脑大屏幕上，商品是一排四个；但在手机上，它们会自动变成一排一个，方便手指滑动。

• 生活中的例子 02

阅读新闻：电脑上左侧有导航栏，而在手机屏幕上，导航栏会自动折叠成一个小小的“汉堡菜单”按钮。

• 生活中的例子 03

看视频：在宽屏显示器上视频旁边有聊天框，当窗口变窄时，聊天框自动移动到视频下方，不再遮挡画面。

新手入门指南

嘿，未来的网页魔术师！👋

你有没有遇到过这种情况：在手机上打开一个旧网站，发现字小得像蚂蚁，必须要用手指不断放大、缩小、左右拖动才能看清内容？这种体验简直糟透了，对吧？

今天我们要学习的魔法叫做 “响应式设计” (Responsive Design)，以及它的核心咒语 “媒体查询” (Media Queries)。学会了它，你就能创造出在任何设备上都令人赏心悦目的网站！

什么是响应式设计？

如果网页是固定的，就像一块坚硬的石头，塞不进小盒子里就会被卡住。但响应式设计让网页变得像 “水” 一样。

想象一下： * 当你把水倒进一个宽大的盘子（台式电脑屏幕）里，水面铺得很开。 * 当你把同样的水倒进一个细长的花瓶（手机屏幕）里，水位变高了，形状也变窄了。

水的内容没有变，但它的形状适应了容器。 这就是响应式设计的精髓：无论用户用的是巨大的电视屏幕，还是小巧的智能手表，你的网站都能自动调整布局，让内容呈现出最完美的状态。

幕后功臣：媒体查询 (Media Queries)

那么，浏览器怎么知道什么时候该把网页变成“盘子形状”，什么时候变成“花瓶形状”呢？这就需要用到 媒体查询 了。