CSS媒体查询max-width规则不生效，宽度小于600px按钮未显示问题求助

问题排查方向 #

按优先级从高到低逐一排查即可解决：

• 缺viewport元标签（最常见原因）
  移动端适配必须在HTML的<head>标签内添加如下元标签，否则浏览器会默认按980px宽度渲染页面，你在设备工具栏调整的宽度不会被CSS正确识别，导致媒体查询不触发：

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

• display属性值兼容性问题
  你媒体查询里用的display: initial兼容性较差，不同浏览器对初始值的解析逻辑不一致，按钮元素的默认展示属性为inline-block，直接替换为display: inline-block即可：

  @media screen and (max-width: 600px) {
    .login-button {
      display: inline-block;
    }
  }
  

• CSS优先级/顺序问题
  1. 确认媒体查询的代码写在了默认.login-button样式的后面，CSS同优先级规则后写的会覆盖先写的，放在前面会被默认的display: none覆盖
  2. 打开Chrome元素检查面板选中登录按钮，看样式栏里媒体查询的display规则是否被划掉，如果是说明有更高优先级的规则（比如id选择器、加了!important的规则）覆盖了当前属性，调整对应优先级即可
• 定位溢出问题
  你给按钮设置了position: absolute，如果它的父元素没有设置position: relative，按钮会相对于整个页面定位，可能跑到可视区域外。可以在检查元素选中按钮时看页面高亮的位置是否在视口外，是的话给按钮的直接父元素添加position: relative即可。

内容的提问来源于stack exchange，提问作者cssidiot.exe