Chrome中SCSS媒体查询仅在开发者工具生效，窗口缩放无效求助

首先，大概率是你混淆了页面缩放和调整浏览器窗口实际宽度这两个操作，导致误以为媒体查询不生效：

• 当你用Chrome的页面缩放功能（比如Ctrl+滚轮、右上角的缩放滑块）时，只是放大/缩小页面内容的显示比例，页面的布局视口宽度并没有改变。媒体查询是基于布局视口的实际尺寸判断的，所以这种操作不会触发媒体查询的条件，自然看不到样式变化。
• 正确的操作应该是拖动浏览器窗口的边缘，改变窗口的实际宽高，这样布局视口的尺寸才会变化，媒体查询的条件才会被触发。

其次，你添加的viewport meta标签在桌面Chrome中的行为和移动设备不同，也可能带来混淆：

<meta name="viewport" content="width=device-width">主要是为移动设备设计的，它会让移动设备的布局视口匹配设备的物理宽度。但在桌面Chrome中，这个标签会把布局视口设置为你的显示器的物理宽度（比如1920px），而不是浏览器窗口的宽度。这意味着：

• 如果你的显示器宽度大于768px，min-width: 768px这个条件会始终为真，媒体查询会一直生效，这和你描述的“完全不生效”不符，所以更倾向于第一种操作上的误解。
• 如果你希望桌面浏览器的媒体查询基于窗口宽度判断，可以暂时移除这个viewport meta标签，或者调整为更适配桌面的设置（不过viewport标签本身对桌面的作用有限）。

另外，顺便提一下你这个mixin的逻辑冗余问题，可能和你的预期不完全匹配：
你的mixin里的screen and (orientation: landscape)条件会匹配所有横屏状态，不管视口宽度是多少（哪怕300px宽的横屏窗口也会触发50%宽度）。如果你的实际需求是“横屏且视口宽度≥481px”才生效，可以把这个条件改成screen and (min-width: 481px) and (orientation: landscape)，这样逻辑更严谨。

最后验证方法：
拖动浏览器窗口边缘，把宽度拉到768px以上，或者调整窗口为竖屏/横屏状态，看看样式是否按预期变化。

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