無法使用媒體查詢專門針對我的桌面

我試圖專門針對我的桌面分辨率使用媒體查詢CSS是1366 x 768.因此，我用這種方法。無法使用媒體查詢專門針對我的桌面

@media (max-width: 1367px)

這個桌面媒體查詢CSS實際工作。

不幸的是，它與我的媒體查詢CSS爲我的S4和iPad發生衝突，導致它們無法正常工作。如下圖所示是我的媒體查詢我的S4和iPad

@media only screen and (max-device-width: 440px)

iPad的

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1)

除了上面我試圖完善我的CSS的方法，有沒有什麼辦法可以專門針對1366x768的我的桌面分辨率？

來源

2014-01-09 Teo Chuen Wei Bryan

use'width：1366px'？ – DaniP

我已更新該問題。對於清晰度的問題感到抱歉。 –

使用'min-width'來代替'min-width：1365px' – DaniP

@media (max-width: 1367px) and (min-width: 1365px)

您的最大寬度規則包括寬度小於1376px的所有內容，所以您應該設置最小值。

不要忘記，這些測量指的是瀏覽器窗口，而不是實際的屏幕，因此它們可能不適合您的目的。

例如，我的桌面是1600 x 1200. 在全屏模式下，我的Firefox窗口將被css引用，其寬度爲1583px。不是1600px。

來源

2014-01-09 15:22:45 daveyfaherty

也不要忘記您指定查詢的順序，如果它們重疊，則很重要。 [請參閱CSS技巧了解更多信息]（http://css-tricks.com/logic-in-media-queries/） –

我的部分是Typo。感謝您找到它。 – daveyfaherty

對不起，但它不工作:( –

使用你的iPad和S4更具體的查詢：

iPad的

CSS

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    /* Styles */ 
}

智能手機（S4）

CSS

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 440px) { 
    /* Styles */ 
}

來源

2014-01-09 15:24:09 Goombah

我相信這不會改變任何東西：/ –

開始最大的屏幕設備，並更新分辨率下降的規則：

@media screen and (min-width: 1367px){ ... } 
@media screen and (max-width: 1366px) and (min-width:1024px){ ... } 
@media screen and (min-width: 1023px) and (max-width:768px){ ... }

等等。

如果你想使用級聯的，記住，最後的規則將繼承之前宣佈的規則的樣式：

@media screen and (max-width:1023px){...} 
@media screen and (max-width:768px){...} ->

在這種情況下，屏幕< 768px將繼承規則從以前的宣言也。

來源

2014-01-09 15:35:46 n1kkou

無法使用媒體查詢專門針對我的桌面

回答

相關問題