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

Meiner Meinung nach sind dies die besten Breakpoints:

@media (min-width:320px)  { /* Smartphones, Porträt iPhone, Porträt 480x320 Telefonen (Android) */ }
@media (min-width:480px)  { /* Smartphones, Android-Telefone, Landschafts-iPhone */ }
@media (min-width:600px)  { /* Porträt-Tablets, Porträt iPad, E-Reader (Nook/Kindle), Landschafts-800x480-Telefone (Android) */ }
@media (min-width:801px)  { /* Tablet, Landschafts-iPad, Low-Res-Laptops und Desktops */ }
@media (min-width:1025px) { /* Große Landschafts-Tablets, Laptops und Desktops */ }
@media (min-width:1281px) { /* High-Res-Laptops und Desktops */ }

Bearbeiten: Optimiert für eine bessere Arbeit mit 960er-Rastern:

@media (min-width:320px)  { /* Smartphones, iPhone, Porträt 480x320-Telefone */ }
@media (min-width:481px)  { /* Porträt E-Reader (Nook/Kindle), kleinere Tablets @ 600 oder @ 640 breit. */ }
@media (min-width:641px)  { /* Porträt-Tablets, Porträt iPad, Landschafts-E-Reader, Landschafts-800x480- oder 854x480-Telefone */ }
@media (min-width:961px)  { /* Tablet, Landschafts-iPad, Low-Res-Laptops und Desktops */ }
@media (min-width:1025px) { /* Große Landschafts-Tablets, Laptops und Desktops */ }
@media (min-width:1281px) { /* High-Res-Laptops und Desktops */ }

In der Praxis wandeln viele Designer Pixel in em um, hauptsächlich weil em ein besseres Zoomen ermöglichen. Bei Standard-Zoom 1em === 16px, multiplizieren Sie Pixel mit 1em/16px, um em zu erhalten. Zum Beispiel, 320px === 20em.

Als Antwort auf den Kommentar ist min-width Standard in der "Mobile-First"-Designrichtlinie, bei der Sie zuerst für Ihre kleinsten Bildschirme designen und dann immer größere Medienabfragen hinzufügen, um sich auf immer größere Bildschirme vorzuarbeiten.

Unabhängig davon, ob Sie min-, max- oder Kombinationen bevorzugen, beachten Sie die Reihenfolge Ihrer Regeln und bedenken Sie, dass wenn mehrere Regeln auf dasselbe Element zutreffen, die späteren Regeln die früheren Regeln überschreiben werden.

Answer 2

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

Die allgemeine Weisheit besagt, nicht auf spezifische Geräte oder Größen abzuzielen, sondern den Begriff 'Breakpoint' neu zu formulieren:

• Entwickeln Sie die Website zuerst für mobile Geräte mit Prozenten oder ems, nicht Pixeln,
• testen Sie es dann in einem größeren Viewport und merken, wo es fehlschlägt,
• überarbeiten Sie das Layout und fügen Sie eine CSS-Media-Abfrage hinzu, um die fehlerhaften Teile zu behandeln,
• wiederholen Sie den Prozess, bis Sie den nächsten Breakpoint erreichen.

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

Verwenden Sie natürliche Breakpoints

Die 'Breakpoints' werden dann der tatsächliche Punkt, an dem Ihr mobiles Design beginnt zu 'brechen', d.h. nicht mehr benutzbar oder visuell ansprechend ist. Sobald Sie eine gut funktionierende mobile Website ohne Media Queries haben, können Sie aufhören, sich um spezifische Größen zu kümmern und einfach Media Queries hinzufügen, die erfolgreich größere Viewports behandeln.

Wenn Sie nicht versuchen, das Design an eine genaue Bildschirmgröße anzupassen, funktioniert dieser Ansatz, indem der Bedarf an spezifischen Geräten entfernt wird. Die Integrität des Designs selbst bei jedem Breakpoint stellt sicher, dass es sich in jeder Größe behaupten wird. Mit anderen Worten, wenn ein Menü/Inhaltsabschnitt/etwas anderes bei einer bestimmten Größe nicht mehr benutzbar ist, designen Sie einen Breakpoint für diese Größe, nicht für eine spezifische Gerätegröße.

Siehe Lyza Gardners Beitrag über verhaltensbedingte Breakpoints und auch Zeldmans Beitrag über Ethan Marcotte und wie sich responsives Webdesign aus der ursprünglichen Idee entwickelt hat.

Verwenden Sie semantische Markup

Außerdem gilt: je einfacher und semantischer die DOM-Struktur mit nav, header, main, section, footer usw. (Vermeidung von Abominierungen wie div class="header" mit verschachtelten inneren div-Tags), desto einfacher wird es, die Responsivität zu realisieren, insbesondere durch Vermeidung von Floats mittels CSS Grid Layout (Sarah Drasners Grid Generator ist ein großartiges Werkzeug dafür) und Flexbox zur Anordnung und Neuordnung gemäß Ihrem RWD-Designplan.

Answer 3

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

Für das 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:

• Wie man seine Website für das Apple iPad anpasst
• CSS3 Media Queries

Answer 4

1. Ich habe diese Website verwendet, um die Auflösung zu finden und CSS entsprechend den tatsächlichen Zahlen zu entwickeln. Meine Zahlen unterscheiden sich ziemlich stark von den oben genannten Antworten, aber mein CSS trifft tatsächlich die gewünschten Geräte.

2. Fügen Sie auch dieses Code-Debugging-Stück direkt nach Ihrer Medienabfrage ein z.B:

   @media only screen and (min-width: 769px) and (max-width: 1281px) { 
     /* für Tablet-Bildschirme mit 10 Zoll */
     body::before {
       content: "Tablet zu einigen Desktop-Medienabfragen (769 > 1281) ausgelöst";
       font-weight: bold;
       display: block;
       text-align: center;
       background: rgba(255, 255, 0, 0.9); /* Halbtransparentes Gelb */
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       z-index: 99;
     }
   } 

   Fügen Sie diesen Debugging-Text in jede einzelne Medienabfrage ein und Sie werden sehen, welche Abfrage angewendet wurde.

Answer 5

Die besten Breakpoints, die von Twitter Bootstrap empfohlen werden

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

    }

    /* Extra kleine Geräte, Telefone */ 
    @media only screen and (min-width : 480px) {

    }

    /* Kleine Geräte, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Mittlere Geräte, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Große Geräte, Breitbildschirme */
    @media only screen and (min-width : 1200px) {

    }

Quelle: https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries