响应式设计

响应式设计是用同一套 HTML 代码和同一个网址面向所有设备，只根据屏幕尺寸改变呈现方式的建站方式^[1]。

官方把适合移动设备的网站分成三种配置，它是其中一种^[1]。因为设备和屏幕各不相同，网站要让内容在这些差异之上仍然可用^[1]。

与另两种方式的区别

另外两种配置是动态提供内容和单独的网址^[1]。比如动态提供内容时，响应里会带 Vary: User-Agent，同一个网址按设备给出不同 HTML。

方式	网址	做法
动态提供内容	同一个网址	依靠 user-agent 嗅探和 Vary 响应标头，给不同设备发不同版本的 HTML[1]
单独的网址	每种设备各自的网址	直接为每种设备准备各自的网址[1]

也就是说，区别在于是否用同一份代码服务所有设备。

让同一份 HTML 跟着屏幕宽度变化，要在 <head> 里放 viewport 标记，再用媒体查询调整布局：

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .banner { width: 100%; }
  @media (min-width: 768px) {
    .banner { width: 720px; margin: 0 auto; }
  }
</style>

width=device-width 让布局宽度跟随设备，媒体查询则在宽屏上换一套样式。

被推荐的原因

Google 建议采用响应式设计，因为这是最容易实现和维护的设计模式^[1][2][3]。

在响应式设计下，移动版和桌面版网页的内容与元数据相同^[1]。因此两个版本要保持一致的那些要求，天然就能满足^[1]。也就是说，维护成本低来自结构本身，而不是额外投入人力去维持两个版本一致。

单一网址的好处

动态提供内容和单独的网址都要为不同设备准备不同版本的 HTML^[1]。

它们还要在多个版本之间建立对应关系，才能让搜索引擎分清哪个是哪个^[1]。响应式设计只用一份 HTML，就不需要在设备之间做匹配^[1]。也就是说，版本越少，出错的地方也越少。

附录

参见

• 移动优先索引
• 移动可用性
• 页面体验

参考资料

官方（境外）

1. 《关于移动网站和优先将移动版网站编入索引的最佳实践》，Google 搜索中心。

第三方

2. 《7 Top SEO Benefits Of Responsive Web Design》，Search Engine Journal。
3. 《Google: How to Move From Separate Mobile URLs to One Responsive URL》，Search Engine Journal。

外部链接

无。