CSS媒体查询高级用法：构建真正响应式的网站，让你的网页“能屈能伸”
话说，咱们现在上网，那设备是五花八门。你用手机刷着抖音，我用平板看着剧，老板用超宽屏显示器盯着报表，奶奶用老式电脑看新闻。要是你的网站在不同的设备上都长一个样，要么小到看不清，要么大的超出屏幕，那用户体验可就糟糕透了。
所以，响应式设计就成了现代网页开发的标配。而CSS媒体查询，就是响应式设计的“金箍棒”，它能让你的网站“能屈能伸”，根据不同的设备，自动调整样式，让用户在任何设备上都能获得最佳的浏览体验。
别以为媒体查询只是简单的 min-width 和 max-width 的组合，它可远不止这些。今天咱们就来聊聊媒体查询的高级用法，保证让你看完之后，功力大增，写出真正响应式的网站。
1. 媒体查询的基本骨架：从“宽度”开始
我们先来回顾一下媒体查询的基本语法，毕竟万丈高楼平地起嘛：
@media (媒体特性) {
/* 在满足媒体特性时应用的样式 */
}最常用的媒体特性就是宽度了，比如：
/* 当屏幕宽度小于 768px 时，应用以下样式 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 当屏幕宽度大于 768px 时，应用以下样式 */
@media (min-width: 768px) {
body {
font-size: 16px;
}
}这段代码的意思是：当屏幕宽度小于768像素时，body的字体大小设置为14像素，大于768像素时，设置为16像素。是不是很简单？这就是媒体查询的“童子功”。
2. 不止宽度，还有“高度”！
很多人都只关注屏幕宽度，却忽略了屏幕高度。其实，高度在某些场景下也很有用，比如：
- 全面屏适配： 现在的手机越来越“长”，很多App都做了全面屏适配。你也可以用
min-height来针对全面屏设备做一些优化。 - 横屏/竖屏判断： 通过
orientation: landscape和orientation: portrait可以判断设备是横屏还是竖屏，然后调整布局。
/* 横屏模式下 */
@media (orientation: landscape) {
/* 横屏时的样式 */
.container {
flex-direction: row; /* 改为横向布局 */
}
}
/* 竖屏模式下 */
@media (orientation: portrait) {
/* 竖屏时的样式 */
.container {
flex-direction: column; /* 改为纵向布局 */
}
}想象一下，你的网站有一个包含图片和文字的容器，横屏时让它们并排显示，竖屏时让它们上下排列，是不是更符合用户的浏览习惯？
3. “分辨率”也得关注：让图片更清晰
现在的设备分辨率越来越高，如果你还用老一套的图片，在高分辨率屏幕上就会显得模糊不清。这时候，就要用到 resolution 这个媒体特性了。
/* 当设备像素比大于等于 2 时，使用高清图片 */
@media (min-resolution: 2dppx) {
.logo {
background-image: url("[email protected]");
}
}这段代码的意思是：如果设备的像素比大于等于2（比如Retina屏幕），就使用 [email protected] 这张高清图片。这样，你的网站在高清屏幕上也能保持清晰锐利。
4. “类型”决定命运：针对不同设备优化
媒体查询还可以根据设备类型来应用不同的样式，比如：
screen：用于电脑屏幕、平板电脑、手机等。print：用于打印机。speech：用于屏幕阅读器。
/* 打印时隐藏导航栏 */
@media print {
nav {
display: none;
}
}
/* 屏幕阅读器优化 */
@media speech {
/* 调整语音阅读的节奏和语调 */
}在打印时隐藏导航栏，可以节省纸张；针对屏幕阅读器进行优化，可以让残障人士也能顺利访问你的网站，这才是真正的“无障碍”设计。
5. “逻辑”的力量：用 and、or、not 组合媒体查询
媒体查询还可以使用逻辑运算符来组合多个条件，让你的样式更加精准。
and：表示“并且”，只有所有条件都满足时，样式才会生效。or：表示“或者”，只要满足其中一个条件，样式就会生效。not：表示“否定”，只有不满足条件时，样式才会生效。
/* 当屏幕宽度小于 768px 并且是横屏时 */
@media (max-width: 768px) and (orientation: landscape) {
/* 应用样式 */
}
/* 当屏幕宽度大于 1200px 或者设备是打印机时 */
@media (min-width: 1200px) or (print) {
/* 应用样式 */
}
/* 当设备不是屏幕时 */
@media not screen {
/* 应用样式 */
}使用逻辑运算符，可以组合出各种复杂的媒体查询，满足各种奇葩的需求。
6. “区间”大法：用 min-width 和 max-width 定义范围
有时候，我们需要针对某个特定的屏幕尺寸范围应用样式，这时候就可以同时使用 min-width 和 max-width 来定义一个区间。
/* 当屏幕宽度在 768px 到 1200px 之间时 */
@media (min-width: 768px) and (max-width: 1200px) {
/* 应用样式 */
}这种方式比单独使用 min-width 或 max-width 更加精确，也更容易维护。
7. “首选方案”：用 prefers-color-scheme 实现暗黑模式
现在的操作系统都支持暗黑模式了，你的网站也应该跟上潮流。可以使用 prefers-color-scheme 这个媒体特性来检测用户是否开启了暗黑模式。
/* 默认样式 */
body {
background-color: #fff;
color: #000;
}
/* 暗黑模式 */
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #fff;
}
}这段代码的意思是：默认情况下，body的背景色是白色，文字颜色是黑色。当用户开启暗黑模式时，body的背景色会变成黑色，文字颜色会变成白色。
8. “用户交互”：用 hover 和 pointer 优化鼠标和触摸体验
媒体查询还可以检测用户的交互方式，比如是否支持鼠标悬停、是否使用触摸屏等。
hover：检测设备是否支持鼠标悬停。pointer：检测设备主要输入设备是指针（鼠标、触摸笔）还是触摸屏。
/* 当设备支持鼠标悬停时 */
@media (hover: hover) {
.button:hover {
background-color: #ccc;
}
}
/* 当设备主要输入设备是触摸屏时 */
@media (pointer: coarse) {
.button {
padding: 15px 30px; /* 增大按钮的点击区域 */
}
}当设备支持鼠标悬停时，可以给按钮添加hover效果；当设备是触摸屏时，可以增大按钮的点击区域，方便用户操作。
9. “嵌套”的艺术：让你的代码更有条理
媒体查询可以嵌套使用，让你的代码更有条理，也更容易维护。
body {
font-size: 14px; /* 默认字体大小 */
@media (min-width: 768px) {
font-size: 16px; /* 大屏幕上的字体大小 */
@media (orientation: landscape) {
font-size: 18px; /* 横屏时更大的字体大小 */
}
}
}这种嵌套的方式，可以清晰地表达出不同屏幕尺寸和方向下的字体大小。
10. “最佳实践”：让你的媒体查询更高效
- 移动优先： 先针对小屏幕设备编写样式，然后再使用媒体查询针对大屏幕设备进行优化。
- 避免重复： 将通用的样式放在媒体查询之外，只在媒体查询内部编写需要修改的样式。
- 合理断点： 不要设置太多的断点，选择几个常用的屏幕尺寸作为断点即可。
- 代码注释： 在媒体查询旁边添加注释，说明该媒体查询的作用，方便日后维护。
总结：让你的网站“百变金刚”
媒体查询是构建响应式网站的利器，掌握了它的高级用法，就能让你的网站在各种设备上都能完美呈现。记住，响应式设计不仅仅是调整布局，更重要的是关注用户体验，让用户在任何设备上都能获得最佳的浏览体验。
希望这篇文章能帮助你更好地理解和使用CSS媒体查询，写出真正响应式的网站，让你的网站像“百变金刚”一样，适应各种设备，赢得用户的喜爱！