媒體查詢不適用於桌面

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文檔中閱讀更多相關信息。 也許這個問題也很有趣。

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