媒体查询像素密度和最大宽度在一起 [英] media query pixel-density and max-width together

问题描述

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

I'm trying to create a rule that includes/excludes based on both max-width and device-pixel-ratio. An example would be if I want the Kindle Fire @ 600px to be excluded, but the iPhone5 @640 (smaller real world screen) to be triggered.

一个AND或一个OR规则？假设它创建一个OR规则，我将如何创建一个执行AND类型函数的规则（必须同时传递'device-pixel-ratio of 2'AND'max-width 749px'检查被触发）

Does the following make an AND or an OR rule? Assuming it makes an OR rule, how would I create a rule that performs an AND type function (must pass both 'device-pixel-ratio of 2' AND 'max-width 749px' checks to be triggered)

@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。它是否正确？我想尝试一个更通用的查询，而不仅仅是iPhones / iPad ...

Okay here is what I have so far - I'm guessing commas are OR and 'and' is obviously AND. Is this correct? I'm trying to make a more universal set of queries targeting more than just iPhones/iPads...

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

推荐答案

strong> iPad 。

Use mediaqueries like this example for iPad with Retina display.

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

这篇关于媒体查询像素密度和最大宽度在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！