Question

我正在尝试根据max-width和device-pixel-ratio创建包含/排除的规则。一个例子是如果我想要排除Kindle Fire @ 600px，而是要触发iPhone5 @ 640（更小的真实世界屏幕）。

以下是否制定了AND或OR规则？假设它是一个OR规则，我将如何创建一个执行AND类型函数的规则（必须同时传递'设备像素比为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。它是否正确？我正在尝试制作更多通用的查询，而不仅仅是针对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

使用此示例的媒体查询 iPad ， Retina显示。

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

Answer 2

或许您可以完全跳过媒体查询并使用类似Restive.JS（http://restivejs.com）的内容。

您甚至根本不需要使用传统断点，只需关注 Form-factors 和 Orientation 。

针对您的具体案例的安装和设置将是：

<!-- 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并按照以下几行标记：

/** 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%;}

此方法使您可以灵活地以直观的方式调整CSS，而无需处理混淆且有时不准确的CSS媒体查询指令。当然，不推荐使用ID选择器，但我发现它们在组织我的CSS标记以及performance impact is infinitesimal时很有用。

完全披露：我开发了插件

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

2 个答案: