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. 希望这些会帮助你。