CSS媒体查询异常：全屏页面应用小屏样式求助

嘿，我一眼就看出问题出在哪了——你用的min-width: 375px媒体查询逻辑搞反啦！

问题解析 #

min-width: 375px的意思是：当屏幕宽度大于等于375px时，应用这个媒体查询里的样式。而你的全屏状态（比如桌面端屏幕宽度肯定远大于375px）正好满足这个条件，所以媒体查询里的.container h1 { font-size: 2.5rem; }就会覆盖你默认设置的5rem字号，这就是为啥全屏时显示2.5rem的原因。

修复方案 #

你需要把媒体查询的条件改成max-width: 375px，这样它只会在屏幕宽度小于等于375px（也就是你说的小屏设备）时生效，全屏状态下就会使用你默认的5rem字号了。

修正后的代码如下：

/* 默认全屏样式：屏幕宽度大于375px时生效 */
.container {
  padding: 0; /* 替换成你原本的全屏padding值即可 */
}
.container h1 {
  font-size: 5rem;
}

/* 小屏设备样式：屏幕宽度小于等于375px时生效 */
@media (max-width: 375px) {
  .container { 
    padding: 0 2rem 0 2rem; 
  }
  .container h1 { 
    font-size: 2.5rem; 
  }
}

另外要注意样式的顺序：默认样式要写在媒体查询前面，这样媒体查询里的样式才能在小屏时正确覆盖默认样式。如果你的默认样式写在其他地方，只要确保它的优先级不会被媒体查询盖过就行（同优先级下，后写的样式会覆盖先写的）。

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