同一网站在手机和电脑上看起来不同的原因 - 响应式设计的原理

同一个 URL，不同的外观

在电脑上浏览的网站用手机打开，布局完全不同。菜单变成了汉堡图标（三条线），图片大小变了，文字大小也不同。为什么同一个 URL 看起来如此不同？

答案是一种叫做"响应式设计"的技术。

响应式设计是一种根据屏幕宽度自动切换布局的技术。它使用 CSS 的"媒体查询"功能来设置规则，如"当屏幕宽度为 768px 以下时应用此样式"。

关键在于 HTML（页面内容）保持不变，只有 CSS（样式规则）发生变化。服务器发送的数据是相同的；浏览器根据屏幕大小调整显示。顺便一提，这些屏幕尺寸信息有时也会被用作浏览器指纹的构成要素之一。

在响应式设计普及之前（约 2010 年），许多网站分别构建"PC 版"和"手机版"。关于当时的网站究竟是什么样子，可以参考旧网站为什么那么丑。

需要维护两个独立的网站，导致内容不一致和更新遗漏频发。当 Google 在 2012 年宣布"推荐响应式设计"后，用单一 URL 服务所有设备的方式成为主流。

在智能手机上常见的三条线菜单图标（☰）被称为"汉堡菜单"。名字来源于三条线像汉堡的面包和肉饼。

这个图标实际上最早于 1981 年在 Xerox Star 电脑上使用。设计师 Norm Cox 将其创建为"视觉上表示菜单内容的图标"，已有超过 40 年的历史。

由于智能手机屏幕较窄，没有足够的空间始终显示所有菜单项。汉堡菜单是一种节省空间的解决方案，只在点击时展开菜单。

截至 2026 年，超过半数的网站流量来自智能手机。因此，网页设计遵循"移动优先"的方式，先为智能手机设计，然后扩展到桌面端。随着用手机上网的比例不断提高，智能手机隐私设置也变得越来越重要。

Google 的搜索引擎也使用"移动优先索引"，基于智能手机显示来评估网站。在智能手机上难以查看的网站可能会看到搜索排名下降。

IP 确认酱也使用响应式设计，让你在智能手机和电脑上都能舒适地查看 IP 地址。

同一个 URL 在智能手机和电脑上看起来不同，是因为 CSS 媒体查询根据屏幕宽度切换了布局。汉堡菜单是一位 40 年的老将，诞生于 1981 年。截至 2026 年，超过半数的网络流量来自智能手机，移动优先已成为标准方式。

通过响应式设计技术，CSS媒体查询根据屏幕宽度自动切换布局。HTML(内容)相同，只有CSS(样式规则)发生变化。

1981年首次在Xerox Star计算机上使用。由设计师Norm Cox先生设计，是一个有40多年历史的图标。

先设计智能手机版，再扩展为电脑版的方法。截至2026年，由于超过半数的网页访问来自智能手机，Google也采用了移动优先索引。