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

我正在尝试创建一个基于最大宽度和设备像素比的包含/排除规则。举个例子，如果我想把KindleFire@600px排除在外，但要触发iPhone5@640（现实世界中较小的屏幕）

以下内容是否构成AND或or规则？假设它生成OR规则，我将如何创建执行AND类型功能的规则（必须通过“设备像素比2”和“最大宽度749px”检查才能触发）

编辑如下：

好的，这是我到目前为止得到的-我猜逗号是或和“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 */

---

将此示例中的MediaQuery用于带有视网膜显示器的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 */ }

---

或者，您可以完全跳过媒体查询，使用Restive.JS（）之类的工具

您甚至不需要使用传统的断点，只需关注形状因子和方向

@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 */ }

针对您的特定案例的安装和设置为：

<!-- Install JQuery version 1.7 or higher -->
<script type="text/javascript" src="jquery.min.js"></script>

<!-- Install Restive Plugin -->
<script type="text/javascript" src="restive.min.js"></script>

<!-- Setup Plugin -->
<script>
$( document ).ready(function() {
    $('body').restive({
        breakpoints: ['10000'],
        classes: ['nb'],
        turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet,is_landscape=landscape'
    });
});
</script>

此方法使您能够灵活地以直观的方式调整CSS，而无需处理令人困惑、有时甚至不准确的CSS媒体查询指令。当然，不推荐使用ID选择器，但我发现它们在组织CSS标记时非常有用

---

完整披露：我开发了插件

谢谢@Akshaya。我特别尝试创建适用于所有设备类型的通用媒体查询，所以我使用了您建议的“和”技术，并尝试将其混合在一起-请参阅更新的问题。这是否按预期工作？

*-不推荐使用设备像素比率。使用
分辨率
（和/或其
min-
或
max-
细化）。也见此
/** For Desktops **/
#sidebar {display: block; float: right; width: 320px;}

/** For Phones **/
.mobi.phone #sidebar {display: none;}

/** For Tablets in Landscape Orientation **/
.mobi.tablet.landscape #sidebar {display: block; width: 35%;}