奇怪的CSS媒体行为

Question

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

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

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

但是在F12模式下，在标准的桌面视图下，是否使用了上面的代码？即使我的屏幕尺寸是1800px，也应该使用默认样式：

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

长话短说：我的CSS文件的作用好像我的屏幕小于1067px，但不是，而是1800px。

Answer 1

缺少一对括号？

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

Answer 2

如果需要该属性

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

要用于1800px屏幕，您需要像

那样放置它

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

将相同的样式应用于屏幕宽度大于或等于1279px的所有设备；您可以使用任何尺寸，而不是从1279px开始，以使属性生效。

如果您希望它只能从1800px开始，

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