0

这是我的所有代码：

    /* 1366 ----------- */
@media (min-width : 1326px) and (max-width : 1639px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg768.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}
/* 1680 ----------- */
@media (min-width : 1640px) and (max-width : 1800px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg1050.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}

/* 1920 ----------- */
@media and screen (min-width : 1800px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg1200.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}

1920 运行良好，例如，如果我将 Windows 栏拖到其中一个站点，它会自动重新缩放并保持背景中的中间容器与网站的调整大小相匹配。

我尝试使用 1680 res 和一个名为“Screenfly”的网站，但容器卡在中间，所以我认为它仍然使用 1920 res，因为对 bg1050.jpg 的更改没有改变任何东西。

比我跳到 1366，因为我有一个具有该分辨率的笔记本，但结果是一样的。有什么建议如何让其他设备以 1920x1080 和 1920x1200 分辨率工作？

4

1 回答 1

0

您正在使用 !important 标记，因为它无法覆盖先前的查询。为了解决这个问题，您必须根据屏幕大小按降序使用媒体查询。例如：

@媒体屏幕和（最大宽度：900px）{

   //some code here

}

@媒体屏幕和（最大宽度：768px）{

  //some code here (Codes you write in here will override the codes from the previous media query which is 900px without using !important tags)

}

通过这样做，您可以摆脱 !important 标签。您还应该像这样使用适当的媒体查询。

正确媒体查询结构的一个示例：@media screen and (max-width:1080px)

于 2014-06-27T07:45:44.043 回答