CSS min/max-width媒体查询规则与样式覆盖问题咨询

先把两个最常用媒体查询的触发逻辑说透，不存在和窗口缩放方向绑定的特殊判定：

• (min-width: Xpx)：只要当前视口宽度大于等于Xpx，媒体查询块内的所有样式就会生效，不管你是从窄屏拉到宽屏还是从宽屏缩到窄屏，只要宽度跨过阈值就触发。
• (max-width: Xpx)：只要当前视口宽度小于等于Xpx，媒体查询块内的样式就会生效。

所有媒体查询内的样式和普通CSS样式遵循完全一致的优先级规则，没有任何特殊权重：同选择器优先级下，后加载的样式覆盖先加载的样式；高优先级选择器的样式不管写在哪都会覆盖低优先级样式，和是否包裹在媒体查询里无关。

你现在的逻辑完全写反了断点对应的适配场景：
你主CSS里写的70px字号、10rem内边距是大屏下的展示效果，但你在query.css里给min-width:1400px（也就是宽度≥1400px的大屏场景）写了更小的字号和内边距，又因为query.css是在主CSS之后加载的，只要屏幕宽度达到1400px，媒体查询内的样式自然会覆盖前面的主CSS样式——这不是媒体查询的特殊机制，就是最基础的CSS层叠规则。

根据你要以哪类屏幕为默认基准，选对应写法即可，不要混着逻辑写：

推荐写法：小屏/移动端优先 #

这是行业通用的标准写法，默认样式直接适配小尺寸屏幕，从小到大通过min-width断点逐步适配更大的屏幕，逻辑清晰、性能更好，不会出现样式意外覆盖的问题：

1. 主CSS写全局基础样式，默认适配宽度小于1400px的屏幕：

.h1,.h2,.h3 {
  font-size: 1em;
  font-family: Cinzel, sans-serif;
}
.nav-link {
  padding-left: 5em;
}

2. query.css里写宽度≥1400px时的大屏适配样式：

@media (min-width: 1400px) {
  .h1,.h2,.h3 {
    font-size: 70px;
  }
  .nav-link{
    padding-left: 10rem;
  }
}

备选写法：大屏优先 #

如果你一定要把大屏样式作为全局默认值，就用max-width断点从大到小适配小屏，不要用min-width写大屏规则：

1. 主CSS写全局基础样式，默认适配宽度≥1400px的大屏：

.h1,.h2,.h3 {
  font-size: 70px;
  font-family: Cinzel, sans-serif;
}
.nav-link {
  padding-left: 10rem;
}

2. query.css里写宽度小于1400px时的小屏适配样式：

/* 用1399.98px是为了规避部分浏览器小数像素计算导致的断点重叠、样式意外触发问题 */
@media (max-width: 1399.98px) {
  .h1,.h2,.h3 {
    font-size: 1em;
  }
  .nav-link{
    padding-left: 5em;
  }
}

注意：非必要不要滥用!important，你当前代码里两处导航样式都加了!important，完全靠加载顺序实现覆盖，后续新增样式很容易出现优先级混乱。只要保证媒体查询样式在基础样式之后加载、选择器优先级和基础样式一致，不需要加!important就能正常完成样式覆盖。

内容的提问来源于stack exchange，提问作者Sheldon