关于@media语法正确性的咨询：网站小屏PC适配失效问题

首先明确一点：你写的 @media only screen and (max-width:1000px) {} 语法完全正确，没有任何语法错误。

那为什么1200px宽度的小屏电脑上不生效？核心原因其实很直观：

• 这个媒体查询的触发条件是仅当视口宽度≤1000px时才会应用里面的样式，1200px明显大于1000px，自然不会触发规则。
• 你之前在家调整浏览器宽度时看到生效，应该是把窗口拉到了1000px及以下的范围，这时候规则才会被激活。

如果想让1200px的小屏电脑也能应用这些兼容样式，可以参考以下调整方案：

1. 扩大媒体查询的宽度阈值，比如改成 @media only screen and (max-width:1200px) {}，这样所有宽度≤1200px的设备（包括你的小屏电脑）都会触发规则。
2. 检查是否有其他优先级更高的CSS规则（比如带!important的样式、更具体的选择器）覆盖了媒体查询里的样式，导致即使触发了也看不到效果。
3. 确认页面的viewport元标签是否正确设置（虽然你手机端生效大概率是对的，但桌面端浏览器也依赖这个来正确计算视口）：

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

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