3個媒體查詢iphone的肖像，風景和ipad肖像

我試過了不同的組合width & device-width但在橫向上的iPhone這個代碼永遠不會變成背景紅色;3個媒體查詢iphone的肖像，風景和ipad肖像

我有問題，當我有超過1媒體查詢。看到這個JSfiddle example股利背景是永遠的綠色，除非你刪除最後一個媒體查詢

這是我想它針對3個不同的媒體查詢：

智能手機和平板電腦（人像只）。這將是在那裏我有一個響應式佈局我所有的通用風格

寬度：320像素 - 479px - 這將適用於小屏幕，如肖像iPhone只

寬度：480像素 - 640像素 - 這將適用於大屏幕如橫向的iphone和縱向的ipad。不是ipad在風景。

請注意，這是一個HTML電子郵件，所以它不可能使用JS。

@media only screen and (max-width: 640px) { 
    body { padding: 10px !important } 
} 
/* Small screen */ 
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) { 
    body { background: blue !important } 
} 
/* iPhone landscape and iPad portrait */ 
@media only screen and (max-device-width: 480px) and (max-device-width: 640px) { 
    body { 
     background: red !important 
     -webkit-text-size-adjust:none; 
    } 
}

參考：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

來源

2012-12-17 John Magnolia

你自己嘗試修改

@media only screen and (max-width: 640px) and (orientation: portrait) { 
    body { padding: 10px !important } 
} 

/* Small screen */ 
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) { 
    body { background: blue !important } 
} 

/* iPhone landscape and iPad portrait */ 
@media only screen and (max-device-width: 480px) and (orientation: landscape), 
@media only screen and (max-device-width: 640px) and (orientation: portrait) { 
    body { 
     background: red !important 
     -webkit-text-size-adjust:none; 
    } 
}

來源

2012-12-23 17:33:33

請注意，逗號'，'作爲'OR'，'和'作爲'和'使用，因此您可以隨時組合媒體查詢。 –

@media只有屏幕和（最大設備寬度：480px）和（方向：風景） - 不適用於iPhone風景，不被識別 – drogon

嗨，我在iOS 6，iPhone 4，媒體查詢「iPhone風景」對我來說不起作用，其餘的作品 – drogon

在這個資源看看，會給你幾乎一切http://arcsec.ca/media-query-builder/媒體查詢，你必須要指定一個最小寬度以及。也少了！重要的，骯髒:)

你的情況

@media only all and (min-device-width: 320px) and (max-device-width: 480px) { 
/* insert styles here */ 
}

來源

2012-12-17 08:01:06 Richlewis

謝謝雖然我看過鏈接，但所有他們選擇只是混淆。我必須使用'！important'，因爲它用於HTML電子郵件，我需要覆蓋內聯樣式。 –

媒體查詢還支持設備的方向。你應該嘗試的

@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
} 

@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
}

您也可以與寬度將它們組合起來，像這樣

@media screen and (max-device-width : 320px) and (orientation:portrait) { 

}

來源

2012-12-17 08:07:01 kernelpanic

方向媒體查詢不適用於iPad和iPad mini :(... –

響應電子郵件可以是艱難的，因爲有這麼多的電子郵件客戶端在那裏，並支持可有限媒體查詢。您可能只想考慮讓百分比變得流暢，所以它們會擴展，而不是媒體查詢。 zurb的人有一些很棒的模板可以幫助你。 http://www.zurb.com/playground/responsive-email-templates

希望有所幫助。

來源

2012-12-20 12:05:47 mToce

我通過在DIFF使用嗡的解決方案嘗試這樣做。它希望它可以幫助別人

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

來源

2017-11-02 17:40:49 sahil

這是我的全部答案： - @ media only screen and（max-device-width：1024px）and（orientation：portrait）{*} */ }只有 } @media屏幕（最大設備寬度：1,024）和（方向：橫向）{ /* *風格/ } – sahil

請幫我修改我的answere！ – sahil

3個媒體查詢iphone的肖像，風景和ipad肖像

回答

相關問題