同一个 URL，不同的外观
在电脑上浏览的网站用手机打开，布局完全不同。菜单变成了汉堡图标（三条线），图片大小变了，文字大小也不同。为什么同一个 URL 看起来如此不同？
答案是一种叫做"响应式设计"的技术。
响应式设计的工作原理
响应式设计是一种根据屏幕宽度自动切换布局的技术。它使用 CSS 的"媒体查询"功能来设置规则，如"当屏幕宽度为 768px 以下时应用此样式"。
- 桌面端（1024px 以上）：三栏布局，有侧边栏，大图片
- 平板端（768-1023px）：两栏布局，侧边栏移到内容下方
- 手机端（767px 以下）：单栏布局，汉堡菜单，图片缩放至屏幕宽度
关键在于 HTML（页面内容）保持不变，只有 CSS（样式规则）发生变化。服务器发送的数据是相同的；浏览器根据屏幕大小调整显示。
响应式设计之前 - "手机版"时代
在响应式设计普及之前（约 2010 年），许多网站分别构建"PC 版"和"手机版"。
www.example.com→ PC 版m.example.com→ 手机版
需要维护两个独立的网站，导致内容不一致和更新遗漏频发。当 Google 在 2012 年宣布"推荐响应式设计"后，用单一 URL 服务所有设备的方式成为主流。
汉堡菜单（☰）的起源
在智能手机上常见的三条线菜单图标（☰）被称为"汉堡菜单"。名字来源于三条线像汉堡的面包和肉饼。
这个图标实际上最早于 1981 年在 Xerox Star 电脑上使用。设计师 Norm Cox 将其创建为"视觉上表示菜单内容的图标"，已有超过 40 年的历史。
由于智能手机屏幕较窄，没有足够的空间始终显示所有菜单项。汉堡菜单是一种节省空间的解决方案，只在点击时展开菜单。
"移动优先"时代
如今，约 60% 的网站流量来自智能手机。因此，现代网页设计遵循"移动优先"的方式，先为智能手机设计，然后扩展到桌面端。
Google 的搜索引擎也使用"移动优先索引"，基于智能手机显示来评估网站。在智能手机上难以查看的网站可能会看到搜索排名下降。
IP 确认酱也使用响应式设计，让你在智能手机和电脑上都能舒适地查看 IP 地址。
总结
同一个 URL 在智能手机和电脑上看起来不同，是因为 CSS 媒体查询根据屏幕宽度切换了布局。汉堡菜单是一位 40 年的老将，诞生于 1981 年。如今 60% 的网络流量来自智能手机，移动优先已成为标准方式。