Media Abfrage Pixeldichte und Max-Breite zusammen

Question

Ich versuche, eine Regel zu erstellen, die auf der Grundlage von Max-Breite und Gerät-Pixel-Verhältnis enthält/ausschließt. Ein Beispiel wäre, wenn der Kindle Fire @ 600px ausgeschlossen werden soll, aber das iPhone5 @ 640 (kleinerer Real-World-Bildschirm) ausgelöst werden soll.

Führt das Folgende zu einer UND- oder einer ODER-Regel? Unter der Annahme, es eine ODER-Regel macht, wie würde ich eine Regel erstellen, die eine UND-Typ Funktion ausführt (muss passieren sowohl ‚device-Pixel-Verhältnis von 2‘ und 'max-width 749px Checks ausgelöst werden)

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

BEARBEITEN SIE UNTEN:

Okay, hier ist, was ich bisher habe - ich denke, Kommata sind OR und 'und' ist offensichtlich UND. Ist das richtig? Ich versuche, eine universellere Menge von Abfragen mehr zu machen als nur iPhones/iPads Targeting ...

@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

Verwenden mediaqueries wie in diesem Beispiel für iPad mit 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

Oder vielleicht können Sie Medienanfragen zusammen und nutzen so etwas wie Restive.JS (http://restivejs.com) überspringen.

Sie haben nicht einmal bei allen herkömmlichen Haltepunkte verwenden müssen, könnten Sie einfach konzentrieren sich auf Form-Faktoren und Orientierung.

Installieren und Einrichten für Ihren speziellen Fall wäre:

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

Dann alles, was Sie zu Ihrem CSS tun müssen, gehe zurück und Markup entlang der folgenden Zeilen:

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

Diese Methode gibt Ihnen die Flexibilität, Ihr CSS auf eine intuitive Weise zu optimieren, ohne mit verwirrenden und manchmal ungenauen CSS Media Query Direktiven umzugehen. Natürlich ist die Verwendung von ID-Selektoren veraltet, aber ich finde sie nützlich, um meine CSS-Markups zu organisieren, plus die performance impact is infinitesimal.

Full Disclosure: Ich entwickelte das Plugin