Medienabfragen: Wie werden Desktop, Tablet und Mobilgerät anvisiert?

Question

Ich habe einige Recherchen zu Medienabfragen durchgeführt und verstehe immer noch nicht ganz, wie man Geräte bestimmter Größen ansprechen kann.

Ich möchte in der Lage sein, Desktop, Tablet und Mobilgeräte anzusprechen. Ich weiß, dass es einige Unterschiede geben wird, aber es wäre schön, ein generisches System zu haben, das zum Ansprechen dieser Geräte verwendet werden kann.

Einige Beispiele, die ich gefunden habe:

# Mobil
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px)

# Desktop
only screen and (min-width: 992px)

# Riesig
only screen and (min-width: 1280px)

Oder:

# Telefon
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

Welche sollten die breakpoints für jedes Gerät sein?

Answer 1

Medienanfragen für gängige Geräte-Breakpoints

/* Smartphones (Hoch- und Querformat) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (Querformat) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (Hochformat) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (Hoch- und Querformat) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (Querformat) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (Hochformat) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops und Laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Große Bildschirme ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Answer 2

1. Extra kleine Geräte (Telefone, bis 480px)
2. Kleine Geräte (Tablets, 768px und höher)
3. Mittlere Geräte (große Landscape-Tablets, Laptops und Desktops, 992px und höher)
4. Große Geräte (große Desktops, 1200px und höher)
5. Portrait-E-Reader (Nook/Kindle), kleinere Tablets - min-width: 481px
6. Portrait-Tablets, Portrait-iPad, Landscape-E-Reader - min-width: 641px
7. Tablet, Landscape-iPad, Lo-Res-Laptops - min-width: 961px
8. HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3
9. Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5
10. Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Ältere Firefox-Browser (vor Firefox 16)
11. Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3
12. LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2
13. Asus Nexus 7 device-width: 601px device-height: 906px -webkit-min-device-pixel-ratio: 1.331) und (-webkit-max-device-pixel-ratio: 1.332)
14. iPad 1 und 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1
15. iPad 3 und 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2)
16. iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)
17. iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2)
18. iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)

Answer 3

Schön und einfach

/* Mobile Geräte */
@media (max-width: 480px) {
    foo > bar {

    }
}

/* Tablets und iPads mit niedriger Auflösung */
@media (min-width: 481px) und (max-width: 767px) {
    foo > bar {

    }
}

/* Tablets iPads (Hochformat) */
@media (min-width: 768px) und (max-width: 1024px){
    foo > bar {

    }
}

/* Laptops und Desktops */
@media (min-width: 1025px) und (max-width: 1280px){
    foo > bar {

    }
}

/* Große Bildschirme */
@media (min-width: 1281px) {
    foo > bar {

    }
}

Answer 4

Dies ist nur für diejenigen, die ihre Websites noch nicht im 'Mobile-First'-Design erstellt haben und nach einer schnellen vorübergehenden Lösung suchen.

Für Mobiltelefone

@media (max-width:480px){}

Für Tablets

@media (max-width:960px){}

Für Laptops/Desktop

@media (min-width:1025px){}

Für Hi-Res-Laptops

@media (max-width:1280px){}

Answer 5

Heutzutage ist es am häufigsten, Geräte mit Retina-Bildschirmen zu sehen, sprich: Geräte mit hoher Auflösung und einer sehr hohen Pixeldichte (meist kleiner als 6 Zoll physischer Größe). Deshalb benötigen Sie Retina-Display-spezialisierte Media-Queries in Ihrem CSS. Dies ist das vollständigste Beispiel, das ich finden konnte:

@media only screen and (min-width: 320px) {

  /* Kleiner Bildschirm, kein Retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Kleiner Bildschirm, Retina, Inhalt, um die oben stehende Media-Query außer Kraft zu setzen */

}

@media only screen and (min-width: 700px) {

  /* Mittlerer Bildschirm, kein Retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Mittlerer Bildschirm, Retina, Inhalt, um die oben stehende Media-Query außer Kraft zu setzen */

}

@media only screen and (min-width: 1300px) {

  /* Großer Bildschirm, kein Retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Großer Bildschirm, Retina, Inhalt, um die oben stehende Media-Query außer Kraft zu setzen */

}

Quelle: CSS-Tricks Website