css - 奇怪的 CSS 媒体行为

Question

我正在创建一个响应式网页，该网页根据屏幕宽度在不同样式之间切换。

@media only screen and (max-width: 1279px) 
{ 
  .col-xs-6 {width: 90%;}
}

如果我在 Chrome 中打开网页，按 F12 并切换设备工具栏，我可以手动调整屏幕宽度并查看样式是否正确更改。

但是退出F12模式，标准桌面视图，上面的代码还在用吗？即使我的屏幕尺寸是 1800px 并且它应该使用默认样式：

.col-xs-6 {
  width: 50%;
}

长话短说：我的 CSS 文件表现得好像我的屏幕小于 1067 像素，但事实并非如此，它是 1800 像素。

标签： css

Answer 1

缺少一对括号？

@media (max-width: 1279px) {
.col-xs-6 {
        width: 90%!important;
    } /* this is missing */
}