根據設備方向更改圖像

Question

我正在爲本地公司構建使用PhoneGap的基本Web應用程序。我爲應用頂部的標題/橫幅創建了兩個圖像。一個針對縱向定位進行了優化，另一個針對橫向進行了優化 我希望能夠顯示取決於裝置的方式。我一直在閱讀關於媒體查詢的內容，坦率地說，它對我的​​需求稍微複雜一點，因爲JQuery移動將爲我處理其餘的功能，而且我只爲整個應用使用一個CSS。

是否有人可以添加幾條簡單的代碼行來幫助解決此問題？

Answer 1

您可以使用CSS媒體查詢的縱向和橫向，它不復雜：

@media screen and (orientation: portrait) { ... } 
@media screen and (orientation: landscape) { ... } 

使用這些媒體查詢可以覆蓋background-image任何方向。

正式文件：http://www.w3.org/TR/css3-mediaqueries/#orientation

有使用它的方法有兩種：

想您已經<div>與header類：

@media screen and (orientation: portrait) 
{ 
    div.header { background-image:url(image1.jpg); } 
} 
@media screen and (orientation: landscape) 
{ 
    div.header { background-image:url(image2.jpg); } 
} 

另外，您不妨用<img>標籤。在這種情況下，您將需要其中兩個，並隱藏/顯示只有一個CSS規則。比方說，<img>標籤分別有類header-land和header-portrait：

@media screen and (orientation: portrait) 
{ 
    .header-land { display:none; } 
    .header-portrait { display:inline-block; } 
} 
@media screen and (orientation: landscape) 
{ 
    .header-land { display:inline-block; } 
    .header-portrait { display:none; } 
} 

Answer 2

這是有關如何使用媒體查詢的答案，這是解決問題的一個比較簡單的方法。但是，一個前提條件是，它的確定以顯示圖像作爲背景的CSS，而不是作爲<img ... />

僞代碼

.my-banner { 
    ...declarations like: 
    background-position: 
    border: 
    margin: 
    padding: 
} 
@media all and (max-width: 320px) { 
    .my-banner { 
    background-image: url(portrait.png); 
} 
@media all and (min-width: 321px) { 
    .my-banner { 
    background-image: url(landscape.png); 
}