5

我正在尝试创建一个包含/排除基于最大宽度和设备像素比率的规则。例如，如果我希望排除 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 */
4

2 回答 2

11

对带有Retina display的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 */ }
于 2013-04-16T18:18:44.350 回答
-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 标记时很有用，而且对性能的影响是无穷小的。

完全披露：我开发了插件

于 2013-12-22T17:21:51.043 回答