media query pixel-density and max-width together

Question

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

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

Answer 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