Question

这是我的全部代码：

    /* 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和一个名为＆＃34; Screenfly＆＃34;但是容器卡在中间所以我认为它仍然使用1920 res，因为对bg1050.jpg的更改没有改变任何东西。

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

Answer 1

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

@media screen and（max-width：900px）{

   //some code here

}

@media screen and（max-width：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)

}

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

适当媒体查询结构的一个示例：@media屏幕和（max-width：1080px）

@Media不同的设备

1 个答案: