Medienabfragen: Wie erreicht man Desktop, Tablet und Handy?

Ich habe einige Nachforschungen über Media-Queries angestellt und verstehe immer noch nicht ganz, wie man Geräte bestimmter Größen anvisieren kann.

Ich möchte in der Lage sein, Desktop, Tablet und Handy Ziel. Ich weiß, dass es einige Diskrepanzen geben wird, aber es wäre schön, ein allgemeines System zu haben, das verwendet werden kann, um diese Geräte anzusprechen.

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)

Wie hoch sollten Ihrer Meinung nach die Haltepunkte für die einzelnen Geräte sein?

Quantastical
Bearbeitete Frage 2. Mai 2013 в 1:06
Programmierung
css3 css mobile tablet media-queries
16. Juni 2011 в 10:57
13 Aufrufe
Lösung

IMO sind dies 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 */ }

Edit: Verfeinert, um besser mit 960er-Rastern zu funktionieren:

@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 wandeln viele Designer Pixel in ems um, vor allem, weil ems das Zoomen besser ermöglichen. Bei Standard-Zoom ist 1em === 16px. Multiplizieren Sie Pixel mit 1em/16px, um ems zu erhalten. Zum Beispiel, 320px === 20em.

Als Antwort auf den Kommentar, min-width ist Standard in "mobile-first" Design, in dem Sie beginnen, indem Sie für Ihre kleinsten Bildschirme, und fügen Sie dann immer größer werdende Media-Queries, arbeiten Sie sich auf größere und größere Bildschirme. Unabhängig davon, ob Sie min-, max- oder Kombinationen davon bevorzugen, achten Sie auf die Reihenfolge Ihrer Regeln und bedenken Sie, dass, wenn mehrere Regeln auf dasselbe Element zutreffen, die späteren Regeln die früheren Regeln außer Kraft setzen.

ryanve
Bearbeitete Antwort 28. Juni 2017 в 5:22
Kommentare (16)

Wenn Sie ein Gerät anvisieren wollen, schreiben Sie einfach min-device-width. Zum Beispiel:

Für iPhone

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

Für Tablets

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

Hier sind einige gute Artikel:

Fizzix
Bearbeitete Antwort 17. März 2014 в 5:13
Kommentare (10)

  1. Ich habe diese Seite benutzt, um die Auflösung zu finden und CSS nach aktuellen Zahlen entwickelt. Meine Zahlen weichen ziemlich stark von den obigen Antworten ab, außer dass mein CSS tatsächlich die gewünschten Geräte trifft.

  2. Außerdem sollten Sie diesen Debugging-Code direkt nach Ihrer Media Query einfügen z.B.:

    @media only screen and (min-width: 769px) and (max-width: 1281px) {
  /* für 10 Zoll Tablet-Bildschirme */
  body::before {
    content: "tablet to some desktop media query (769 > 1281) fired";
    font-weight: bold;
    Anzeige: block;
    text-align: center;
    background: rgba(255, 255, 0, 0.9); /* Halbtransparentes Gelb */
    Position: absolut;
    top: 0;
    links: 0;
    rechts: 0;
    z-index: 99;
  }
}

Fügen Sie dieses Debugging-Element in jede einzelne Medienabfrage ein und Sie werden sehen, welche Abfrage angewendet wird.

loxsat
Bearbeitete Antwort 12. Januar 2019 в 10:25
Kommentare (0)