响应式网页设计的核心是通过灵活的布局和样式规则，让网页在不同尺寸、不同分辨率的设备上都能获得合适的显示效果，而CSS媒体查询是实现这一目标的核心技术手段。很多开发者在编写媒体查询时会遇到规则不生效、样式被覆盖的问题，本质是对媒体查询的优先级逻辑理解不够清晰。
响应式设计的基本适配思路
在动手编写媒体查询之前，需要先建立正确的响应式适配思路，避免后续出现大量冗余的样式规则。首先建议采用移动端优先的开发策略，即先编写适配小屏幕移动端的基础样式，再通过媒体查询逐步添加适配大屏幕的规则，这样能减少不必要的样式覆盖。
核心的适配维度包括视口宽度、设备像素比、屏幕方向等，其中视口宽度是最常用的判断条件。需要在HTML的head标签中设置视口元标签，确保移动端设备能正确识别页面宽度：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
CSS媒体查询的基础语法
媒体查询的基本语法结构为@media 媒体类型 and (媒体特性) { 样式规则 }，常用的媒体类型包括screen（屏幕设备）、print（打印设备）等，实际开发中大多省略媒体类型，默认针对所有媒体类型生效。
常见的媒体特性包括：
width：视口宽度，可配合min-和max-前缀使用，比如max-width: 768px表示视口宽度小于等于768px时生效device-pixel-ratio：设备像素比，用于适配高清屏幕orientation：屏幕方向，值为portrait（竖屏）或landscape（横屏）
下面是一个基础的媒体查询示例，实现小屏幕、中等屏幕、大屏幕三档适配：
/* 基础样式：适配移动端小屏幕 */
.container {
width: 100%;
padding: 10px;
}
/* 中等屏幕：视口宽度大于等于768px时生效 */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
padding: 20px;
}
}
/* 大屏幕：视口宽度大于等于1200px时生效 */
@media (min-width: 1200px) {
.container {
width: 1170px;
padding: 30px;
}
}
CSS媒体查询的优先级判定规则
媒体查询本身的优先级和普通CSS规则优先级逻辑一致，遵循以下核心规则：
1. 相同优先级下，后定义的规则覆盖先定义的规则
当多个媒体查询的条件同时匹配，且内部的样式选择器优先级相同时，后面编写的媒体查询规则会覆盖前面的规则。比如下面的示例中，当视口宽度为800px时，两个媒体查询的条件都满足，最终.box的背景色会显示为蓝色：
.box {
width: 100px;
height: 100px;
}
/* 第一个媒体查询：宽度大于700px时生效 */
@media (min-width: 700px) {
.box {
background-color: red;
}
}
/* 第二个媒体查询：宽度大于750px时生效 */
@media (min-width: 750px) {
.box {
background-color: blue;
}
}
2. 选择器优先级高于媒体查询的顺序
如果媒体查询内部的样式选择器优先级不同，那么优先级高的选择器规则会生效，不受媒体查询定义顺序的影响。比如ID选择器的优先级高于类选择器，即使类选择器的媒体查询定义在后面，ID选择器的样式依然会生效：
/* 类选择器媒体查询：宽度大于768px时生效 */
@media (min-width: 768px) {
.title {
font-size: 20px;
}
}
/* ID选择器，优先级更高 */
#title {
font-size: 16px;
}
3. 媒体查询条件范围越精确，优先级越高？
很多开发者误以为媒体查询的条件范围越精确优先级越高，实际上这个认知是错误的。媒体查询的条件只是判断规则是否生效，不会提升规则的优先级。比如min-width: 768px和min-width: 768px and max-width: 992px这两个条件，只是后者的匹配范围更小，但两者的规则优先级依然由选择器和定义顺序决定。
实用的媒体查询优先级技巧
结合上面的优先级规则，在实际开发中可以采用以下技巧避免样式冲突，提升适配效率：
1. 遵循移动端优先的编写顺序
按照视口宽度从小到大定义媒体查询，这样大屏幕的规则会自动覆盖小屏幕的规则，符合后定义覆盖先定义的优先级逻辑，减少不必要的!important使用。比如先写max-width: 768px的规则，再写max-width: 992px的规则，不过更推荐用min-width从小到大排列。
2. 避免重复定义相同选择器的样式
尽量把不同分辨率下共用的样式提取到基础样式中，媒体查询中只写需要变化的样式，减少规则冲突的可能。比如容器的宽度在不同分辨率下变化，其他属性不变，就只在媒体查询中修改宽度属性。
3. 谨慎使用!important
!important会提升样式的优先级，打破正常的优先级规则，除非是修改第三方组件的样式且没有更好的方案，否则不要使用。如果必须使用，要做好注释说明使用原因，避免后续维护困难。
4. 复杂场景可以用CSS自定义属性配合媒体查询
对于需要多分辨率调整的属性，可以定义CSS自定义属性，在媒体查询中修改变量值，这样能让样式逻辑更清晰，也减少重复代码：
:root {
--container-padding: 10px;
--font-size-base: 14px;
}
/* 中等屏幕调整变量 */
@media (min-width: 768px) {
:root {
--container-padding: 20px;
--font-size-base: 16px;
}
}
/* 大屏幕调整变量 */
@media (min-width: 1200px) {
:root {
--container-padding: 30px;
--font-size-base: 18px;
}
}
.container {
padding: var(--container-padding);
font-size: var(--font-size-base);
}
常见适配场景示例
下面是一个完整的导航栏适配示例，实现小屏幕下导航折叠，大屏幕下导航横向排列的效果：
<nav class="navbar">
<div class="logo">网站LOGO</div>
<ul class="nav-list">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
/* 基础样式：移动端适配 */
.navbar {
display: flex;
flex-direction: column;
padding: 15px;
background-color: #f8f9fa;
}
.logo {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.nav-list {
list-style: none;
padding: 0;
margin: 0;
display: none; /* 小屏幕默认隐藏导航列表 */
}
.nav-list li a {
display: block;
padding: 8px 0;
text-decoration: none;
color: #333;
}
/* 中等屏幕及以上：横向排列导航 */
@media (min-width: 768px) {
.navbar {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.logo {
margin-bottom: 0;
}
.nav-list {
display: flex;
gap: 20px;
}
.nav-list li a {
padding: 0;
}
}
通过合理运用媒体查询的优先级规则，结合移动端优先的开发思路，就能高效处理不同分辨率的适配需求，减少样式冲突问题，提升响应式页面的开发效率和可维护性。