SEO 百科

媒体查询

本页目录

媒体查询 是 CSS 里的一段条件写法，按设备特征套用样式，最常见的用法是按视口宽度切换布局^[1]。做 SEO 的人关心它，因为响应式设计由它实现，而谷歌和百度都优先按移动版页面来收录。

媒体查询在做什么

条件写成 @media (max-width: 600px) { ... }，条件成立才应用里面的规则^[1]。除宽度外，它还能按方向、分辨率、色彩偏好这些特征判断。

它也可以写在 <link media="..."> 上，用来决定是否加载那份样式表。

/* 小屏：单列 */
.card { width: 100%; }

/* 宽到 600px 以上：两列并排 */
@media (min-width: 600px) {
  .card { width: calc(50% - 1rem); }
}

断点是切换布局的宽度阈值，例如 600px、900px。移动优先的写法先写小屏样式，再用 min-width 逐级增强。

<meta name="viewport"> 让移动浏览器按设备宽度渲染页面。缺了它，移动端会按桌面宽度渲染，再整体缩小^[2]。

<meta name="viewport" content="width=device-width, initial-scale=1">

Google 用智能手机代理抓取移动版页面，并用这些内容建立索引与排名^[3]。移动版与桌面版的内容必须一致，把内容从移动版删掉，索引里就没有这一部分。

折叠或标签页里的内容仍在源码中，不因为需要展开而丢失^[3]。这一点是移动端版式取舍的前提。

收录从抓取开始，百度把抓取概括为从互联网抓取网页、建立索引数据库、把索引库中的数据展现给用户^[4]；移动端渲染错乱，抓回来的内容也跟着错乱。

断点按内容断，不按具体机型断。机型换代快，按机型写的断点很快就过时。

断点数量少而够用，每多一个都要维护。文档里常见 600px 与 900px 两三个档，覆盖手机、平板与桌面。

用样式隐藏内容时，要确认它是否还在源码里。写在源码里、只是暂时不显示的内容，仍然会被索引。

无。