css - 媒体查询像素密度和最大宽度一起

Question

我正在尝试创建一个包含/排除基于最大宽度和设备像素比的规则。一个示例是，如果我希望排除 Kindle Fire @ 600px，但要触发 iPhone5 @640(较小的真实世界屏幕)。

以下是 AND 还是 OR 规则？假设它制定了一个 OR 规则，我将如何创建一个执行 AND 类型函数的规则(必须同时通过 'device-pixel-ratio of 2' 和 'max-width 749px' 检查才能触发)

@media only screen and (min--moz-device-pixel-ratio: 2), 
        only screen and (-o-min-device-pixel-ratio: 2/1), 
        only screen and (-webkit-min-device-pixel-ratio: 2), 
        only screen and (min-device-pixel-ratio: 2),
        only screen and (max-width: 749px){
        }

编辑如下:

好的，这就是我目前所知道的——我猜逗号是 OR，而“and”显然是 AND。这样对吗？我正在尝试制作一组​​更通用的查询，而不仅仅是针对 iPhone/iPad...

@media
only screen and (max-device-width : 721px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (max-device-width : 721px) and (orientation : portrait) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 359px) {
/* All Portrait Phones */
}

@media
only screen and (min-device-width : 360px) and (max-device-width : 999px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-width : 360px) and (max-device-width : 999px) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 999px) {
/* Small tablets (assume vertical) and landscape phones */
}
/*note - Anything over 999 wide to render fully - desktop, landscape or large tablets */

Answer 1

对具有 Retina 显示屏 的 iPad 使用此示例中的媒体查询。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }