答案：CSS媒体查询通过条件判断实现响应式设计，结合Flexbox和Grid布局，可根据屏幕尺寸、方向、分辨率及用户偏好等特性动态调整样式。使用移动优先策略、合理设置断点、采用相对单位并充分测试，能提升多设备兼容性与用户体验。
CSS媒体查询，说白了，就是我们给浏览器下的一道“指令”，告诉它：“嘿，当你的屏幕宽度达到某个值，或者处于某种状态时，就用这套样式；否则，就用另一套。” 它的核心作用，就是让网站内容能够根据用户设备的屏幕尺寸、分辨率、甚至打印模式等特性，灵活地调整布局和样式，从而实现我们常说的响应式设计。
解决方案
要编写CSS媒体查询，首先你得明白它的基本语法结构。最常见的就是基于屏幕宽度的条件判断。我们通常会用到
@media规则，后面跟着媒体类型（比如
screen表示屏幕设备）和媒体特性（比如
min-width或
max-width）。
一个基础的媒体查询长这样：
/* 当屏幕宽度小于或等于768px时应用 */
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
.container {
width: 90%;
margin: 0 auto;
flex-direction: column; /* 假设原来是flex布局 */
}
}
/* 当屏幕宽度大于768px时应用 */
@media screen and (min-width: 769px) {
body {
font-size: 18px;
}
.container {
width: 70%;
max-width: 1200px;
margin: 0 auto;
flex-direction: row;
}
}这里，
screen指定了媒体类型是屏幕设备，
and是逻辑操作符，连接了媒体类型和媒体特性。
max-width和
min-width则是最常用的媒体特性，它们定义了断点（breakpoints）。你可以根据自己的设计需求，设定多个断点来覆盖不同的设备尺寸，比如手机、平板、桌面显示器等。
立即学习“前端免费学习笔记（深入）”；
在实际操作中，我们还会用到一些其他媒体特性，比如
orientation（横屏或竖屏）、
resolution（分辨率），甚至像
prefers-color-scheme（用户系统偏好的颜色模式，比如深色模式）这样的高级特性。
别忘了，为了让响应式设计真正生效，你的HTML文件头部通常还需要加上一个
viewport元标签，告诉浏览器如何渲染页面宽度：
这行代码确保了页面宽度与设备宽度一致，并且初始缩放比例为1.0，这对于媒体查询的正确工作至关重要。
响应式设计中，媒体查询的最佳实践有哪些？
我在做响应式项目时，发现一些习惯真的能让开发效率和最终效果提升不少。首先，我个人倾向于“移动优先”（Mobile-First）的策略。这意味着我先为最小的屏幕（通常是手机）编写基础样式，然后逐步使用
min-width媒体查询来为更大的屏幕添加或覆盖样式。这样做的逻辑是，小屏幕的限制更多，设计和开发时更容易聚焦核心内容和功能；然后在大屏幕上，我们有更多空间去“增强”体验，而不是“缩减”功能。
其次，关于断点（breakpoints）的选择，我的建议是不要盲目地去适配各种设备的具体尺寸。市面上手机、平板型号太多了，根本适配不过来。更合理的做法是，根据你的内容和布局在某个尺寸下开始“看起来不对劲”的时候，才设置一个断点。比如，当你的导航栏在小屏幕上挤成一团，或者图片在大屏幕上显得太小，那就是时候考虑加一个断点了。这样设置的断点更自然，也更有意义。
再者，尽量使用相对单位，比如
em、
rem、
%、
vw和
vh。它们能让你的布局和字体大小更好地自适应，减少在不同断点下频繁调整数值的麻烦。比如，用
rem来设置字体大小，用
%或
vw来设置容器宽度，这样在不同屏幕尺寸下，元素会根据比例自动缩放，省去了很多微调的工作。
最后，别忘了测试。真的，在各种真机或者模拟器上测试，你会发现很多意想不到的问题。尤其是在不同浏览器上，媒体查询的行为有时会有细微差异，多测试总是没错的。
除了屏幕宽度，媒体查询还能检测哪些设备特性？
媒体查询的强大之处远不止于屏幕宽度。我曾经在一些项目中利用它实现了不少有意思的功能。除了最常见的
width和
height（包括
min-width、
max-width、
min-height、
max-height），我们还能检测设备的方向、分辨率，甚至用户的偏好设置。
比如，
orientation特性可以检测设备是处于
portrait（竖屏）还是
landscape（横屏）模式。这对于一些需要根据屏幕方向调整布局的应用场景非常有用，比如一个画廊应用，横屏时可能想展示更多图片，竖屏时则更注重单张图片的细节。
@media screen and (orientation: landscape) {
/* 横屏时应用的样式 */
.gallery-item {
width: 25%; /* 横屏时每行显示4张 */
}
}
@media screen and (orientation: portrait) {
/* 竖屏时应用的样式 */
.gallery-item {
width: 50%; /* 竖屏时每行显示2张 */
}
}resolution特性则能让你针对不同DPI（每英寸点数）的屏幕应用样式，这对于处理高DPI屏幕（比如Retina显示屏）上的图片质量很有帮助。你可以为高分辨率屏幕提供更高清的图片，避免模糊。
@media screen and (min-resolution: 2dppx) {
/* 针对高DPI屏幕（2倍像素密度）应用样式 */
.logo {
background-image: url('logo@2x.png');
background-size: contain;
}
}此外，一些更现代的媒体特性也很有意思，比如
prefers-color-scheme，它可以检测用户操作系统是偏好深色模式还是浅色模式，让你能为用户提供更贴心的体验。
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #eee;
}
a {
color: #8ab4f8;
}
}还有
prefers-reduced-motion，用于检测用户是否偏好减少动画效果，这对于提升网站的无障碍性非常有帮助。当用户开启这个设置时，你可以禁用或减少页面上的复杂动画。
@media (prefers-reduced-motion: reduce) {
.hero-animation {
animation: none !important;
transition: none !important;
}
}这些特性让媒体查询变得非常灵活和强大，能够帮助我们构建出更智能、更用户友好的网站。
媒体查询和现代CSS布局（如Flexbox、Grid）如何协同工作？
在我看来，媒体查询、Flexbox和CSS Grid这三者简直是现代Web布局的“黄金搭档”。它们不是互相替代的关系，而是相互补充，各自扮演着不同的角色。媒体查询负责“什么时候”改变布局，而Flexbox和Grid则负责“如何”改变布局。
你可以把媒体查询想象成一个“开关”或者“条件判断器”。它根据屏幕尺寸或其他设备特性，决定激活哪一套CSS规则。而Flexbox和Grid，就是这些规则里面的“布局引擎”。
举个例子，假设你有一个包含多个卡片（card）的布局。在小屏幕上，你可能希望这些卡片垂直堆叠，每个卡片占据一行。但在大屏幕上，你可能希望它们并排显示，形成一个多列布局。
这时候，媒体查询就派上用场了：
Card 1Card 2Card 3
.card-container {
display: flex;
flex-direction: column; /* 默认小屏幕垂直堆叠 */
gap: 16px; /* 卡片间距 */
}
@media (min-width: 768px) {
.card-container {
flex-direction: row; /* 大屏幕改为水平排列 */
flex-wrap: wrap; /* 允许换行 */
justify-content: space-around; /* 均匀分布 */
}
.card {
flex: 1 1 calc(33.33% - 20px); /* 每个卡片占据约1/3宽度，并考虑间距 */
max-width: 300px; /* 限制卡片最大宽度 */
}
}在这个例子中，我们默认使用Flexbox的
flex-direction: column实现小屏幕的垂直堆叠。当屏幕宽度达到768px时，媒体查询激活，将
flex-direction改为
row，并配合
flex-wrap和
justify-content实现水平多列布局。Flexbox在这里非常适合一维的布局调整。
如果你的布局更复杂，需要二维的网格结构，CSS Grid就能大显身手了。比如，你可能希望在桌面端有一个头部、侧边栏和主内容区域的复杂布局，而在手机端则全部堆叠。
.page-layout {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"; /* 小屏幕默认堆叠 */
grid-template-rows: auto 1fr auto;
gap: 16px;
}
@media (min-width: 1024px) {
.page-layout {
grid-template-areas:
"header header"
"sidebar main"; /* 大屏幕变为两列布局 */
grid-template-columns: 250px 1fr; /* 侧边栏固定宽度，主内容区自适应 */
grid-template-rows: auto 1fr;
}
}这里，
grid-template-areas和
grid-template-columns/
rows在媒体查询内部被重新定义，实现了完全不同的布局结构。Grid的强大之处在于它能让你直观地定义整个页面的二维网格，然后将元素放置到对应的区域。
所以，核心思想是：媒体查询提供了一个“条件切换”的机制，而Flexbox和Grid则提供了强大的、声明式的布局能力。将它们结合起来，我们就能以非常高效和灵活的方式，为不同设备和屏幕尺寸提供定制化的用户体验，这在过去是难以想象的。它们共同构建了现代响应式设计的基石。
