Question

我正在尝试为我的桌面做一个CSS，因此我使用下面的媒体查询将我的css链接到我的桌面。

我的桌面分辨率为1440 x 900.因此，我的桌面媒体查询css如下所示

@media (max-width: 1440px) {

  #loginpage {
    position:relative;
    margin-top:15%;
  }

  #headerbodyadmin {
    position:relative;
    margin-top:20%;
  }

}

我也尝试过这种方法。

@media only screen and (max-width : 1440px){
}

不幸的是，它不起作用。我检查了各种媒体查询教程，这似乎是为我的桌面分辨率1440x900实现css的正确方法。

我知道我在这里做错了吗？

Answer 1

尝试在最大宽度@media (max-width: 1441px)

中添加一个像素

Answer 2

我检查了它并且它有效，在这里你可以找到例子

http://jsfiddle.net/7VVsA/

@media (max-width: 1440px) {

  #loginpage {
    position:relative;
    margin-top:15%;
    background:red;
  }

  #headerbodyadmin {
    position:relative;
    margin-top:20%;
    background:yellow;
  }

}

Answer 3

width和height属性描述了视图端口的长度，而不是设备屏幕分辨率device-width和device-height。如果使用width属性，则考虑的值可能小于屏幕分辨率宽度，因为窗口周围有边框或滚动条。移动设备上的浏览器通常使用屏幕的整个宽度，因此您在那里看不到这种效果。这是MDN对width属性所说的内容：

宽度媒体功能描述输出设备渲染表面的宽度（例如文档窗口的宽度或打印机上页面框的宽度）。

因此，如果您想要在设备的宽度分辨率为1440px时触发样式，我会像这样使用它：

@media (max-device-width: 1440px) {
    /* your style */
}

您可以在MDN文档中阅读more。也许this问题也很有趣。

Answer 4

解决方案01：而不是max width。你可以使用min-width

像

/*Sizes above 1024*/
@media (min-width: 1024px) {

}

解决方案02：或者您可以尝试将+1添加到您的宽度

像

/*width 1441 to avoid any other conflict */
@media (max-width: 1441px) {

}

Answer 5

我检查了代码并且工作正常，请确保您在html页面中也引用了id。

检查此网址：http://jsfiddle.net/Ravichand/8kznk/

@media  (max-width: 1440px) {

#loginpage {
position:relative;
margin-top:15%;
color:red;
}

#headerbodyadmin {
position:relative;
margin-top:20%;
color:skyblue;
}
}

媒体查询不适用于桌面

5 个答案: