Tablet için minimum çözünürlük ve maksimum çözünürlük için ortam sorguları

Question

Hızlı yanıt veren bir tasarım web sitesinde çalışıyor. Genişlik ve ekran çözünürlüğüne bağlı olarak farklı cihazları hedeflemek için medya sorgusu kullanıyorum.

1. Aygıtları hedeflemek için ekran çözünürlüğünü kullanmak istediğim bir senaryo var, ancak bunun nasıl çalıştığını anlamıyorum.

2. Hem min genişlik hem de maksimum genişliği kontrol etmek istedim, bununla birlikte ekran çözünürlüğü de 97dpi - ipad max resolution 264dpi arasında olabilir. Ama bu işe yaramıyor. Tek bir çözünürlük min genişliği verirseniz: hp yüklü tablet için 155dpi çalışır. Ama maksimum çözünürlük koşuluna min çalışmıyor gibi görünüyor. Fikirlerinizi paylaşır mısınız?

Bunun için ben çok yerine device-pixel-ratio kullanarak daha başarılı olabilir aşağıdaki kodu

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){ 

Answer 1

resolution medya sorgusu doesn't have good support in webkit browsers yet gibi kullandık.

http://bjango.com/articles/min-device-pixel-ratio/

yüzden her şeyi webkit (Chrome, Safari iOS ve Android) için anlamak bu tarayıcılar (Firefox, IE9 +, Opera) için resolution ve device-pixel-ratio kullanarak Medya sorgusunun yeniden yazabiliriz:

Windows8.1 simülatörü ön ayarları işleyeceği

@media only screen and (min-resolution:96dpi) and (max-resolution:264dpi) and (min-width:768px) and (max-width:1024px), 
     only screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio:2) and (min-width:768px) and (max-width:1024px) {} 

Answer 2

Bu yutması:

@media screen and (resolution: 96dpi) and (max-width: 512px) and (device-aspect-ratio: 1024/768), 
    screen and (resolution: 96dpi) and (max-width: 683px) and (device-aspect-ratio: 1366/768), 
    screen and (resolution: 96dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080), 
    screen and (resolution: 96dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) { 
    body { 
    background-color: red !important; 
    } 
} 

@media screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1200), 
    screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 720px) and (device-aspect-ratio: 1440/1080), 
    screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080) { 
    body { 
    background-color: violet !important; 
    } 
} 

@media screen and (max-resolution: 174dpi) and (min-resolution: 172dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) { 
    body { 
    background-color: purple !important; 
    } 
} 

Answer 3

Ac benim telefon 37em veya daha fazla olduğundan ancak

@media screen and (min-width: 37em) { 
} 

http://quirksmode.org/tablets.html

Quircksmode tarafından eski ölçüme Cording, bu, sanırım yeni tabletler için iyi çalışmaz.

Ne hakkında:

@media screen and (min-width: 42em) { 
}