iPhone 5和iPad的CSS的媒體查詢

Question

我工作的網站有3個桌面和iPad的視圖，兩個方向一個視圖， 和iPhone/iPod不同的一個，第三個是一個警告，讓你設備的肖像，到期在這個方向上圖形可以被更好的理解，問題是iPhone5的風景變得有點iPad的版本，並有一點我的意思是它隱藏了大部分的東西，但它沒有告訴我旋轉設備的警告，任何想法或建議，這是媒體的疑問。

/* ---------- iPhone/iPod Only Portrait ---------- */ 
@import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait); 
/* ---------- Retina iPhone/iPod Only Portrait ---------- */ 
@import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2); 
/* ---------- Non Retina iPhone/iPod Only Portrait ---------- */ 
@import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1); 
/* ---------- iPhone5 portrait Only ---------- */ 
@import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2); 


/* ---------- iPhone/iPod Only Landscape ---------- */ 
@import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape); 
/* ---------- Retina iPhone/iPod Only landscape ---------- */ 
@import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2); 
/* ---------- Non Retina iPhone/iPod Only landscape ---------- */ 
@import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1); 
/* ---------- iPhone5 landscape Only ---------- */ 
@import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2); 




/* ---------- iPad Only Portrait---------- */ 
@import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait); 
/* ---------- iPad Portrait Retina Device Only ---------- */ 
@import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2); 
/* ---------- iPad Portrait Non Retina Device Only ---------- */ 
@import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1) ; 


/* ---------- iPad Only landscape---------- */ 
@import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape); 
/* ---------- iPad landscape Retina Device Only ---------- */ 
@import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 2)and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2) ; 
/* ---------- iPad landscape Non Retina Device Only ---------- */ 
@import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 1)and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1) ; 

@import url('../css/style_respond.css') screen and (orientation:landscape) and (min-width: 1024px); 

Answer 1

爲什麼你在@import中使用它？在同一個css文件中，導入css並不像@media屏幕方法那樣高效。您可以在同一個樣式表中爲所有設備（iPhone，iPad或桌面）定義所有響應式（橫向或縱向）規則。 嘗試一下基本指南Web Designer Blog on Mediaqueries.。 然後得到所有的設備特定，如iPhone 5 as well as iPad，從here. 希望這些會幫助你。