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

Da es viele unterschiedliche Bildschirmgrößen gibt, die sich immer ändern und höchstwahrscheinlich immer ändern werden, ist es am besten, Ihre Breakpoints und Media Queries an Ihrem Design zu orientieren.

Der einfachste Weg dies zu tun, ist Ihr abgeschlossenes Desktop-Design zu nehmen und es in Ihrem Webbrowser zu öffnen. Verkleinern Sie langsam den Bildschirm, um ihn schmaler zu machen. Beobachten Sie, wann das Design anfängt zu "brechen" oder furchtbar aussieht und überfüllt wirkt. An diesem Punkt wäre ein Breakpoint mit einer Media Query erforderlich.

Es ist üblich, drei Sets von Media Queries für Desktop, Tablet und Telefon zu erstellen. Aber wenn Ihr Design auf allen drei gut aussieht, warum sich dann die Mühe machen, drei verschiedene Media Queries hinzuzufügen, die nicht notwendig sind. Machen Sie es auf Bedarf!

Answer 2

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

Dadurch lädt der Browser alle CSS-Ressourcen herunter, unabhängig vom media-Attribut. Der Unterschied besteht darin, dass wenn die Media-Query des Media-Attributs auf false ausgewertet wird, wird die .css-Datei und ihr Inhalt nicht blockierend gerendert.

Deshalb wird empfohlen, das media-Attribut im -Tag zu verwenden, da es eine bessere Benutzererfahrung garantiert.

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

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

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

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

Answer 3

Es gibt einen Weg, all dies zu vereinfachen:

<500px: 's' Vertikale Handys

>500px: 'l' Desktop, TV, Tablets, Handys im horizontalen Modus

Hinweis: Ich habe die Zahl 500 gewählt, weil die kleinste Breite, die man bei einem Desktop-Fenster einstellen kann, 500 ist. Alles, was größer ist, ist ein Desktop und alles kleinere ist ein vertikales mobiles Gerät.

Sie können Ihre Website nur mit diesen Breakpoints entwerfen, da es immer eine Überschneidung zwischen Desktops, TVs, Tablets und horizontalen Handys gibt. Wenn Ihr Design gut auf einem kleinen Desktop aussieht (Beispiel: 600px), dann wird es auch auf den anderen Geräten gut aussehen.

Ein weiterer Breakpoint kann hinzugefügt werden, damit der kleine Desktop und Tablets ein besseres Design mit mehr Platz haben:

<500px: 's' Vertikales Handy

500px - 1200px: 'm' Kleiner Desktop, Tablets, Horizontale Handys

>1200px: 'l' Großer Desktop, Horizontale Tablets

Die Media Queries:

/*<500px S*/
@media only screen and (max-width: 499px) { }

/*500-1200 M*/
@media only screen and (min-width: 500px) and (max-width: 1199px) { }

/*>1200px L*/
@media only screen and (min-width: 1200px) { }

Answer 4

Beste Lösung für mich, um festzustellen, ob ein Gerät mobil ist oder nicht:

@media (pointer:none), (pointer:coarse) {
}

Answer 5

Es geht nicht um die Anzahl der Pixel, sondern 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:" nutzlos. Eine ausführliche Erläuterung zu diesem Thema finden Sie hier: Was genau ist das Geräte-Pixelverhältnis?

Die "@media"-Abfragen berücksichtigen die Anzahl der Pixel und das Geräte-Pixelverhältnis, was zu einer "virtuellen Auflösung" führt, die beim Design Ihrer Seite tatsächlich berücksichtigt werden muss: Wenn Ihre Schriftart 10px feste Breite hat und die "virtuelle horizontale Auflösung" 300 px beträgt, werden 30 Zeichen benötigt, um eine Zeile zu füllen.