奇怪的CSS媒体行为

时间:2019-01-08 04:28:43

标签: css

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

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

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

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

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

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

2 个答案:

答案 0 :(得分:1)

缺少一对括号?

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

答案 1 :(得分:0)

如果需要该属性

@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%;}
}