Zapytanie o media o gęstości pikseli i maks. Szerokości razem

Question

Próbuję utworzyć regułę obejmującą/wykluczającą na podstawie zarówno szerokości maksymalnej, jak i współczynnika pikseli urządzenia. Przykładem może być, jeśli chcę wyłączyć Kindle Fire @ 600px, ale zostanie wyzwolony iPhone5 @ 640 (mniejszy ekran świata rzeczywistego).

Czy następujące elementy tworzą regułę LUB? Zakładając, że to sprawia, że ​​przepis lub, w jaki sposób utworzyć regułę, która wykonuje i funkcja typu (musi przechodzić zarówno „device-pixel-stosunek 2” i sprawdza „max-width 749px” być wyzwalany)

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

EDYTUJ PONIŻEJ:

Okej, oto co mam do tej pory - domyślam się, że przecinki to OR, a "i" jest oczywiście ORAZ. Czy to jest poprawne? Próbuję uczynić bardziej uniwersalny zestaw zapytań kierowanych więcej niż tylko iPhone'ów/iPadów ...

@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

Wpisz mediaqueries jak w poniższym przykładzie dla iPada z wyświetlaczem Retina .

@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

Albo można pominąć zapytań o media całkowicie i użyć coś jak Restive.JS (http://restivejs.com).

Nie trzeba nawet stosować zwykłe punkty przerwania w ogóle, można po prostu skupić się na Form-czynników i Orientacja.

Instalacja i konfiguracja dla konkretnego przypadku byłoby:

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

Wtedy wszystko trzeba zrobić, to wrócić do swojego CSS i oznaczyć zgodnie z poniższymi wytycznymi:

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

ten Metoda daje Ci elastyczność w dostosowywaniu swojego CSS w intuicyjny sposób, nie zajmując się mylącymi i czasami niedokładnymi dyrektywami CSS Media Query. Oczywiście używanie selektorów ID jest przestarzałe, ale uważam je za użyteczne w organizowaniu mojego znacznika CSS, a także w przypadku performance impact is infinitesimal.

Pełne ujawnienie: Opracowałem wtyczkę