PC端Media Query突然失效，浏览器开发者工具中可正常运行求助

之前正常运行的Media Query，现在PC端屏幕窗口尺寸小于760px时完全失效，但在浏览器开发者工具里模拟小屏幕却能正常触发规则。以下是我使用的Media Query代码，我原本以为代码没问题：

@media only screen and (max-width: 760px) and (max-device-width: 760px) {
    .conainerInp {
        display: block !important;
    }
    .contInputs,
    .contInputs3 {
        flex: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px;
        width: 100%;
    }
    .last {
        margin-bottom: 60px;
    }
    .contenido {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .contenedoresGen {
        max-width: 100% !important;
        width: 100% !important;
    }
     ::ng-deep .mat-horizontal-content-container {
        padding: 0 !important;
    }
     ::ng-deep.mat-horizontal-stepper-content {
        overflow: auto !important;
    }
     ::ng-deep .mat-tab-label-container {
        overflow-x: auto !important;
    }
}

相关截图：

问题原因 #

问题出在你添加的max-device-width: 760px条件上：

• max-width检测的是浏览器视口宽度（也就是当前窗口的宽度）
• max-device-width检测的是设备的物理屏幕宽度，PC端的物理屏幕宽度基本都远大于760px，哪怕你把浏览器窗口缩到很小，这个条件也永远不满足

所以PC端窗口缩小时，两个条件无法同时达成，媒体查询就不会生效；而开发者工具模拟移动设备时，会把设备物理宽度设为对应的值，所以两个条件都满足，规则就能触发。

解决方案 #

直接去掉max-device-width: 760px这个条件，只保留视口宽度的判断，修改后的代码如下：

@media only screen and (max-width: 760px) {
    .conainerInp {
        display: block !important;
    }
    .contInputs,
    .contInputs3 {
        flex: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px;
        width: 100%;
    }
    .last {
        margin-bottom: 60px;
    }
    .contenido {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .contenedoresGen {
        max-width: 100% !important;
        width: 100% !important;
    }
     ::ng-deep .mat-horizontal-content-container {
        padding: 0 !important;
    }
     ::ng-deep.mat-horizontal-stepper-content {
        overflow: auto !important;
    }
     ::ng-deep .mat-tab-label-container {
        overflow-x: auto !important;
    }
}

这样PC端窗口缩小到760px以下时，媒体查询就能正常触发规则了。

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