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.的要点希望这些能帮助你。

iPhone 5和iPad css媒体查询

1 个答案: