media query pixel-density and max-width together

问题

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.

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){
        }

EDIT BELOW:

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

回答1:

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

回答2:

Or maybe you can skip media queries altogether and use something like Restive.JS (http://restivejs.com).

You don't even need to use conventional breakpoints at all, you could just focus on Form-factors and Orientation.

Install and Setup for your specific case would be:

<!-- 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>

Then all you'll need to do is go back to your CSS and markup along the following lines:

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

This method gives you the flexibility to tweak your CSS in an intuitive way without dealing with confusing and sometimes inaccurate CSS Media Query Directives. Of course, using ID selectors is deprecated but I find them useful in organizing my CSS markup, plus the performance impact is infinitesimal.

Full Disclosure: I developed the Plugin

来源：https://stackoverflow.com/questions/16030041/media-query-pixel-density-and-max-width-together

标签

css

media-queries