为何设置@media(min-width:768px)且(max-width:991px)时991px退回基础样式

问题成因 #

• 核心错误是viewport元标签配置错误：你代码<head>中的viewport标签content属性存在语法错误，width=后缺少device-width参数，导致浏览器不会根据真实窗口/设备宽度计算布局，默认使用PC端虚拟布局视口（通常为980px），媒体查询的宽度判断逻辑完全错位，才会出现991px宽度下样式不匹配的问题。
• 次要风险是媒体查询断点存在逻辑缝隙：你同时用min-width+max-width限定平板样式范围，在部分高DPI屏幕、带系统滚动条的Windows浏览器下，可能出现视口宽度浮点计算结果刚好落在991px~992px之间的情况，既不命中平板规则也不命中桌面规则，直接回退到移动端基础样式。

修复方案 #

第一步：修正viewport配置 #

把<head>中的viewport标签替换为正确写法：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个修改会让浏览器的布局视口和真实窗口宽度保持一致，是移动端适配的基础前提。

第二步：优化媒体查询逻辑（二选一即可） #

方案A：移动端优先简化写法（更推荐）

移动端优先的场景下不需要加max-width限制，后续更高断点的样式会自然覆盖低断点的样式，避免多条件判断冲突：

/*******平板设备样式（宽度≥768px生效）************/
@media(min-width: 768px) {
  h1 {
    width: 90%;
    left: 35px;
  }
  .section {
    margin: 0px;
    margin-bottom: 5%;
    width: 40%;
    float: left;
    left: 35px;
  }
  #section3 {
    clear: both;
    width: 90%;
  }
  #section1 {
    margin-right: 10%;
  }
}

/*******桌面设备样式（宽度≥992px生效，会覆盖上方平板样式）************/
@media(min-width: 992px) {
  .section {
    margin: 0px;
    margin-right: 2%;
    width: 30%;
    float: left;
  }
  #section1 {
    margin-left: 2%;
  }
  /* 覆盖平板端对section3的特殊设置 */
  #section3 {
    clear: none;
    width: 30%;
  }
}

方案B：保留原逻辑修复断点缝隙

如果不想调整原有结构，只要把平板媒体查询的max-width改成991.98px，规避浮点计算的缝隙即可：

@media(min-width: 768px) and (max-width: 991.98px) {
  /* 保留原有平板样式不变 */
}

修改完成后，991px宽度下就会正常命中平板样式，不会回退到移动端基础样式。

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