CSS media查询：让网页自适应不同设备的实用技巧

你有没有遇到过这种情况：在手机上打开一个网站，文字小得要眯眼才能看清，或者图片大得撑出屏幕？其实，这多半是因为网页没做好响应式设计。而解决这个问题的关键，就是CSS media查询。

什么是CSS media查询？

简单来说，media查询就是一段CSS代码，它能判断设备的特性，比如屏幕宽度、高度、方向甚至分辨率，然后根据这些条件加载不同的样式。这样一来，同一个网页在手机、平板、电脑上都能有合适的显示效果。

最常用的场景：按屏幕宽度调整布局

比如你做了一个三栏布局的网页，在电脑上看很舒服。但放到手机上，三栏挤在一起就乱了套。这时候就可以用media查询，在窄屏幕上改成单栏布局。

/* 默认样式：小屏幕用单栏 */
.container {
  flex-direction: column;
}

/* 当屏幕宽度大于768px时，改为横排 */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

更精细的控制：横屏与竖屏

有时候你还想区分手机是横着拿还是竖着拿。比如在竖屏时显示紧凑布局，横屏时展开更多内容。

@media (orientation: portrait) {
  .banner {
    height: 100px;
  }
}

@media (orientation: landscape) {
  .banner {
    height: 50px;
  }
}

针对高分辨率屏幕优化图片

现在不少手机和平板都是“视网膜屏”，像素密度很高。如果还用普通图片，看起来会模糊。可以用media查询专门给高分屏提供高清图。

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .icon-home {
    background-image: url('home@2x.png');
    background-size: 20px 20px;
  }
}

实际开发中的小贴士

写media查询时，建议采用“移动优先”策略。先写手机端的样式，再通过min-width逐步增强大屏体验。这样既能保证小设备加载快，也能在大屏上展现更多细节。

另外，别只盯着常见的断点（比如768px、1024px），最好根据你的设计稿来定。有时候一个组件在800px就该换布局了，那就设成800px，不用非得凑整。

现在很多前端框架已经内置了响应式工具类，但了解底层的media查询原理，能让你在遇到特殊需求时更快定位问题，而不是干等着查文档。