Question

我有像这样的css媒体查询

<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (min-device-width : 20px) and (max-device-width : 480px)" />

<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />

问题在于智能手机 - landscape.css文件也在为iPad执行。我该怎样预防呢？因此智能手机景观仅适用于iPhone的landsacpe模式（适用于类似分辨率的设备），但不适用于iPad。

Answer 1

参考Chris Coyer的文章，这里有一些特定的css代码，仅针对ipad和带有媒体查询的智能手机。

完整文章：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

请注意仅限ipad查询的特定“设备”参考：

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

所以在你的情况下：

<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (max-width : 320px)" />
<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />

Answer 2

您必须在ipad-landscape.css中重新应用样式表，因为smartphone.css会将其写入。

媒体查询：iPad正在执行smartphone-landscape

2 个答案: