React+SCSS响应式网站DevTools测试正常，拖拽浏览器宽度时媒体查询断点不触发

• 核心逻辑匹配规则错误：媒体查询使用了min-device-width/max-device-width作为判断条件
  这类条件匹配的是设备本身的物理屏幕固定宽度，和当前浏览器窗口的视口宽度没有关联。比如你使用1920px物理宽度的笔记本，无论把浏览器窗口从全屏拖拽到半幅宽度，设备物理宽度的数值始终是1920，永远不会落在你设置的320-812px、813-1080px的断点区间里，自然无法触发对应样式。
• DevTools测试正常的原因：Chrome DevTools的设备模拟模式会主动注入可动态调整的虚拟设备宽度值，模拟不同设备的物理参数，所以在模拟环境下断点可以正常触发；退出DevTools回到真实浏览器环境时，device-width读取的是真实硬件的固定参数，不会随窗口拖拽变化。
• 代码语法疏漏：你写的and(orientation: portrait)中，连接词and和后面的括号之间缺少空格，SCSS编译器在部分场景下会将这段规则识别为无效语法，直接丢弃整段媒体查询的内容，进一步加剧断点失效的问题。

• 替换媒体查询的判断基准：将所有min-device-width、max-device-width替换为min-width、max-width
  这类条件匹配的是当前浏览器视口的实时宽度，会随着窗口拖拽、屏幕旋转动态更新，完全匹配普通用户、招聘方测试响应式效果的操作场景，不需要额外引入React Hook监听视口宽度。
• 修正代码语法问题：所有媒体查询中的逻辑连接词and后方必须保留空格，避免编译阶段规则失效。
• 修正后的代码参考：

// 平板适配断点
@media only screen 
and (min-width: 813px) 
and (max-width: 1080px) {
    .content-landing {
        .hider {
            h2 {
                font-size: $fsLandingText-tablet;

                .link,
                a {
                    font-size: $fsLandingText-tablet;
                }
            }
        }
    }
}

// 手机竖屏适配断点
@media only screen 
and (min-width: 320px) 
and (max-width: 812px) 
and (orientation: portrait) {
    .content-landing {
        .hider {
            h2 {
                font-size: $fsLandingText-phone;
                .link,
                a {
                    font-size: $fsLandingText-phone;
                }
            }
        }

        .line {
            display: none;
        }
    }
}

• 验证方法：修改完成后直接退出DevTools，拖拽浏览器窗口边缘调整宽度，即可看到断点正常触发的效果，和DevTools内的模拟表现保持一致。

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