css - @Media 不同的设备

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 运行完美，例如，如果我将我的窗口栏拖动到其中一个站点，它会自动重新缩放并使背景中的中间容器与网站的大小调整相匹配。

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

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

Answer 1

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

@media 屏幕和(最大宽度:900 像素){

   //some code here

@media 屏幕和(最大宽度:768 像素){

  //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)