web-dev-qa-db-ger.com

Medienabfragen: Wie zielen Sie auf Desktop, Tablet und Handy ab?

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

Ich möchte Desktop, Tablet und Mobile ansprechen können. Ich weiß, dass es einige Abweichungen geben wird, aber es wäre schön, ein generisches System zu haben, mit dem diese Geräte angesprochen werden können. 

Einige Beispiele, die ich gefunden habe:

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

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

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

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

Oder:

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

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

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

Was sollten Ihrer Meinung nach diese "Haltepunkte" für jedes Gerät sein?

csscss3mobilemedia-queriestablet
388
betamax

IMO das sind die besten Haltepunkte:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Bearbeiten : Verfeinert, um besser mit 960-Gittern zu arbeiten:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In der Praxis konvertieren viele Designer Pixel in Ems, vor allem in B/C-Emmen ist das Zoomen günstiger. Bei Standard-Zoom 1em === 16px. Multipliziere Pixel mit 1em/16px, um ems zu erhalten. Zum Beispiel 320px === 20em.

Als Antwort auf den Kommentar ist min-width Standard im "Mobile-first" -Design, bei dem Sie zunächst für Ihre kleinsten Bildschirme entwerfen und dann ständig wachsende Medienabfragen hinzufügen, um auf größeren und größeren Bildschirmen zu arbeiten. Unabhängig davon, ob Sie min-, max- oder Kombinationen daraus bevorzugen und die Reihenfolge Ihrer Regeln beachten, sollten Sie berücksichtigen, dass, wenn mehrere Regeln auf dasselbe Element zutreffen, die späteren Regeln die früheren Regeln überschreiben.

530
ryanve

Wenn Sie ein Gerät ansprechen möchten, schreiben Sie einfach min-device-width. Zum Beispiel:

Für iPhone

@media only screen and (min-device-width: 480px){}

Für Tabletten

@media only screen and (min-device-width: 768px){}

Hier sind einige gute Artikel:

144
sandeep

Zielen Sie nicht auf bestimmte Geräte oder Größen!

Das allgemeine Weisheit ist , nicht auf bestimmte Geräte oder Größen abzuzielen , sondern den Begriff "Haltepunkt" neu zu definieren:

  • entwickeln Sie die Site für mobile first mit Prozentsätzen oder Ems, nicht mit Pixeln.
  • versuchen Sie es dann in einem größeren Ansichtsfenster und notieren Sie, wo der Fehler auftritt.
  • neugestaltung des Layouts und Hinzufügen einer CSS-Medienabfrage, um die defekten Teile zu behandeln,
  • wiederholen Sie den Vorgang, bis Sie den nächsten Haltepunkt erreichen.

Sie können responsivepx.com verwenden, um die "natürlichen" Haltepunkte zu finden, wie in "Haltepunkte sind tot" von Marc Drummond .

Verwenden Sie natürliche Haltepunkte

Die "Haltepunkte" werden dann zu dem tatsächlichen Punkt, an dem Ihr mobiles Design zu "brechen" beginnt , d. H. Nicht mehr verwendbar oder optisch ansprechend zu sein. Wenn Sie eine gut funktionierende mobile Website ohne Medienabfragen haben, können Sie aufhören, sich um bestimmte Größen zu kümmern, und einfach Medienabfragen hinzufügen, die nacheinander größere Ansichtsfenster verarbeiten.

Wenn Sie nicht versuchen, ein Design auf eine exakte Bildschirmgröße festzulegen, können Sie mit dieser Methode die Notwendigkeit beseitigen, bestimmte Geräte als Ziel festzulegen . Die Integrität des Designs selbst an jedem Haltepunkt stellt sicher, dass es bei jeder Größe Bestand hat. Mit anderen Worten, wenn ein Menü/Inhaltsbereich/was auch immer ab einer bestimmten Größe nicht mehr verwendet werden kann, entwerfen Sie einen Haltepunkt für diese Größe , nicht für eine bestimmte Gerätegröße.

Siehe Lyza Gardners Beitrag zu Verhaltens-Breakpoints und auch Zeldmans Beitrag zu Ethan Marcotte und wie sich reaktionsschnelles Webdesign entwickelt hat von der ersten Idee.

138
Dave Everitt

  1. Ich habe diese site verwendet, um die Auflösung zu finden und CSS anhand von tatsächlichen Zahlen zu entwickeln. Meine Zahlen weichen ein wenig von den obigen Antworten ab, mit der Ausnahme, dass mein CSS tatsächlich die gewünschten Geräte trifft. 

  2. Haben Sie diesen Code-Code gleich nach Ihrer Medienabfrage Beispiel:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { 
  /* for 10 inches tablet screens */
  body::before {
    content: "tablet to some desktop media query (769 > 1281) fired";
    font-weight: bold;
    display: block;
    text-align: center;
    background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  }
}

    Fügen Sie dieses Debugging-Element in jeder einzelnen Medienabfrage hinzu, und Sie sehen, welche Abfrage angewendet wurde. 

46
user2060451

Die besten von Twitter Bootstrap empfohlenen Haltepunkte

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }
22
Santosh Khalse

Medienabfragen für allgemeine Gerätehaltepunkte

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

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

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

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

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

/* iPads (portrait) ----------- */
@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 and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@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 */
}
20
Purvik Dhorajiya
  1. Extra kleine Geräte (Telefone bis zu 480 Pixel) 
  2. Kleine Geräte (Tablets ab 768px) 
  3. Mittlere Geräte (große Tablets, Laptops und Desktops, ab 992px) 
  4. Große Geräte (große Desktops ab 1200px) 
  5. porträt-E-Reader (Nook/Kindle), kleinere Tablets - Min-Breite: 481px 
  6. hochformat-Tablets, Hochformat-iPad, Querformat-E-Reader - Mindestbreite: 641px 
  7. tablet, iPad im Querformat, Notebooks mit niedriger Auflösung - Min-Breite: 961px
  8. HTC One Gerätebreite: 360px Gerätehöhe: 640px -Webkit-Gerät-Pixel-Verhältnis: 3
  9. Samsung Galaxy S2 Gerätebreite: 320px Gerätehöhe: 534px -Webkit-Gerät-Pixel-Verhältnis: 1,5 (min-moz-Gerät-Pixel-Verhältnis: 1,5), (-o-min-Gerät-Pixel-Verhältnis: 3/2), (Min-Geräte-Pixelverhältnis: 1,5 
  10. Samsung Galaxy S3 Gerätebreite: 320px Gerätehöhe: 640px -Webkit-Gerät-Pixel-Verhältnis: 2 (min-moz-Gerät-Pixel-Verhältnis: 2), - Ältere Firefox-Browser (vor Firefox 16) - 
  11. Samsung Galaxy S4 Gerätebreite: 320px Gerätehöhe: 640px -Webkit-Gerät-Pixel-Verhältnis: 3 
  12. LG Nexus 4 Gerätebreite: 384px Gerätehöhe: 592px -Webkit-Gerät-Pixel-Verhältnis: 2 
  13. Asus Nexus 7 Gerätebreite: 601px Gerätehöhe: 906px - Webkit-Min-Gerät-Pixel-Verhältnis: 1.331 und (-webkit-max-Gerät-Pixel-Verhältnis: 1,332)
  14. iPad 1 und 2, iPad Mini Gerätebreite: 768px Gerätehöhe: 1024px -Webkit-Gerät-Pixel-Verhältnis: 1 
  15. iPad 3 und 4 Gerätebreite: 768px Gerätehöhe: 1024px -Webkit-Gerät-Pixel-Verhältnis: 2) 
  16. iPhone 3G Gerätebreite: 320px Gerätehöhe: 480px -Webkit-Gerät-Pixel-Verhältnis: 1) 
  17. iPhone 4 Gerätebreite: 320px Gerätehöhe: 480px -Webkit-Gerät-Pixel-Verhältnis: 2) 
  18. iPhone 5 Gerätebreite: 320px Gerätehöhe: 568px -Webkit-Gerät-Pixel-Verhältnis: 2)
18
Web Designer cum Promoter

Es geht nicht um die Anzahl der Pixel, es geht um die tatsächliche Größe (in mm oder Zoll) der Zeichen auf dem Bildschirm, die von der Pixeldichte abhängt .. _. Daher sind "min-width:" und "max-width:" useless . Eine vollständige Erklärung zu diesem Problem finden Sie hier: Was genau ist das Pixelverhältnis des Geräts?

Bei "@media" -Abfragen werden die Pixelanzahl und das Pixelverhältnis des Geräts berücksichtigt, was zu einer "virtuellen Auflösung" führt, die Sie beim Entwerfen Ihrer Seite tatsächlich berücksichtigen müssen: Wenn Ihre Schriftart 10px fest ist und " Virtuelle horizontale Auflösung "beträgt 300 px, zum Füllen einer Zeile werden 30 Zeichen benötigt.

5
jumpjack

Da es viele unterschiedliche Bildschirmgrößen gibt, die sich ständig ändern und höchstwahrscheinlich immer ändern werden, ist es am besten, Ihre Haltepunkte und Medien Abfragen auf Ihrem Entwurf zu verwenden.

Der einfachste Weg, dies zu tun, besteht darin, Ihr fertiges Desktop-Design zu erfassen und in Ihrem Webbrowser zu öffnen. Verkleinern der Bildschirm langsam um es schmaler zu machen. Beobachten Sie, wann das Design beginnt,"break"oder schrecklich und verkrampft aussieht. An diesem Punkt wäre ein Haltepunkt mit einer Medienabfrage erforderlich.

Es ist üblich, drei Gruppen von Medienabfragen für Desktop, Tablet und Telefon zu erstellen. Wenn Ihr Design jedoch bei allen drei Anwendungen gut aussieht, warum sollten Sie sich nicht die Mühe machen, drei verschiedene Medienabfragen hinzuzufügen, die nicht erforderlich sind.Tun Sie es nach Bedarf!

4
Robert Rocha

Heutzutage ist es am häufigsten, Retina-Bildschirme zu sehen, mit anderen Worten: Geräte mit hoher Auflösung und einer sehr hohen Pixeldichte (jedoch in der Regel kleiner als 6 Zoll physikalische Größe). Aus diesem Grund benötigen Sie für Retina-Anzeigen spezielle Medienabfragen in Ihrem CSS. Dies ist das vollständigste Beispiel, das ich finden konnte:

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

  /* Small screen, non-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) { 

  /* Small screen, retina, stuff to override above media query */

}

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

  /* Medium screen, non-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) { 

  /* Medium screen, retina, stuff to override above media query */

}

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

  /* Large screen, non-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) { 

  /* Large screen, retina, stuff to override above media query */

}

Quelle: CSS-Tricks-Website

2
Ezequiel Adrian

Das Verhalten ändert sich nicht auf dem Desktop. Aber auf Tablets und Handys erweitere ich die Navbar, um das große Logo zu verdecken. Hinweis: Verwenden Sie Rand (oben und unten) so viel, wie Sie für die Höhe Ihres Logos benötigen. 

Für meinen Fall haben 60px oben und unten perfekt funktioniert! 

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

Überprüfen Sie die Navigationsleiste hier .

2
Pratik Khadloya
  • Extra kleine Geräte ~ Telefone (<768px) 
  • Kleine Geräte ~ Tablets (> = 768px) 
  • Mittlere Geräte ~ Desktops (> = 992px) 
  • Große Geräte ~ Desktops (> = 1200px)
0
bekzat

Eine zusätzliche Funktion ist, dass Sie auch Media-Abfragen im media -Attribut des <link>-Tags verwenden können.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

Damit lädt der Browser alle CSS-Ressourcen herunter, unabhängig vom media -Attribut .Der Unterschied besteht darin, dass die Media-Abfrage des media-Attributs mit false ausgewertet wird Diese .css-Datei und ihr Inhalt werden nicht gerendert.

Daher wird empfohlen, das Attribut media im Tag <link> zu verwenden, da dies eine bessere Benutzererfahrung gewährleistet.

Hier können Sie einen Google-Artikel zu diesem Problem lesen https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Einige Tools, die Ihnen helfen, die Trennung Ihres CSS-Codes in verschiedene Dateien gemäß Ihren Medienabfragen zu automatisieren

Webpack https://www.npmjs.com/package/media-query-pluginhttps://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

0
Juanma Menendez