複雜媒體查詢

Question

一如既往，感謝您的幫助。

我想寫一個複雜的媒體查詢，並想知道如果有人可以幫助。

• 我想用small.css對於任何一個方向有一張寬度或高度小於640像素，
• 我想用large.css對於具有的寬度和高度，所有設備的所有設備大於640像素

下面是的讓我的一部分 - 我想打破上述規則，並使用

• large.css如果設備是景觀和具有寬度大於639px
個
• small.css如果設備是縱向和其寬度小於640像素，

這就是我現在所擁有的

"only screen and (min-device-width:320px) and (max-device-width:639px)" 
    "only screen and (min-device-height:320px) and (max-device-width:639px)" 
    "only screen and (min-device-width:640px)" 

任何幫助將不勝感激！

由於

富

Answer 1

的裝置是風景，並具有寬度大於639px

<link rel="stylesheet" media="screen and (orientation:landscape) and (min-device-width: 639px" href="large.css" /> 

的裝置是縱向，並具有一寬度小於640像素

​​

Answer 2

首先，(min|max)-device-width不會對設備的寬度有幫助，而不是視口/瀏覽器窗口的像素寬度。但是，這個問題在移動設備/平板電腦上有所減少，因爲瀏覽器幾乎總是設備的全部寬度/高度。

此外，同時使用寬/高選項可能會導致一些衝突，與設備方向使用時尤爲突出，所以在分割取向您的所有疑問可能的幫助。

這應該給你一個起點：

// small.css 
    media="only screen and (max-width:639px) and (orientation: portrait)" 

// large.css 
    media="only screen and (min-width:640px) and (orientation: landscape)" 

媒體查詢是不是一門精確的科學由於設備/ OS廠商混合的支持。如果您環顧網絡，您可以找到開發人員努力滿足各種設備。

值得看的下面找到例子，什麼可能，如何你可以結合查詢以更好地適應單個設備或更廣範圍：

• Mozilla Developer Network (CSS media queries)
• W3C Media Queries