Ich habe einige Nachforschungen zu Medienabfragen angestellt und verstehe immer noch nicht ganz, wie ich Geräte bestimmter Größen ansprechen soll.
Ich möchte auf Desktop, Tablet und Mobile abzielen können. Ich weiß, dass es einige Unstimmigkeiten geben wird, aber es wäre schön, ein generisches System zu haben, mit dem diese Geräte gezielt eingesetzt 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 die Haltepunkte für jedes Gerät sein?
css
mobile
media-queries
tablet
Betamax
quelle
quelle
Antworten:
IMO das sind die besten Haltepunkte:
Bearbeiten : Verfeinert, um mit 960 Gittern besser zu arbeiten:
In der Praxis konvertieren viele Designer Pixel in Ems. B / C-Ems leisten sich das Zoomen besser. Bei Standardzoom
1em === 16px
. Multipliziere Pixel mit1em/16px
, um ems zu erhalten. Zum Beispiel320px === 20em
.Die Reaktion auf den Kommentar
min-width
ist Standard im "Mobile-First" -Design, bei dem Sie zunächst für Ihre kleinsten Bildschirme entwerfen und dann immer mehr Medienabfragen hinzufügen, um auf immer größere Bildschirme zu gelangen. Unabhängig davon, ob Sie oder Kombinationen davon bevorzugenmin-
,max-
sollten Sie die Reihenfolge Ihrer Regeln kennen. Beachten Sie, dass die späteren Regeln die früheren Regeln überschreiben, wenn mehrere Regeln mit demselben Element übereinstimmen.quelle
min-width: 320px
CSS das überschreibtmin-width: 801px
?Zielen Sie nicht auf bestimmte Geräte oder Größen!
Die allgemeine Weisheit besteht nicht darin, bestimmte Geräte oder Größen anzuvisieren, sondern den Begriff "Haltepunkt" neu zu definieren:
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, dh nicht mehr verwendbar oder optisch ansprechend ist. Sobald Sie eine gut funktionierende mobile Website ohne Medienabfragen haben, können Sie sich keine Gedanken mehr über bestimmte Größen machen und einfach Medienabfragen hinzufügen, die sukzessive größere Ansichtsfenster verarbeiten.
Wenn Sie nicht versuchen, ein Design auf eine genaue Bildschirmgröße festzulegen, müssen Sie bei diesem Ansatz nicht mehr auf bestimmte Geräte abzielen . Die Integrität des Designs selbst an jedem Haltepunkt stellt sicher, dass es in jeder Größe standhält. Mit anderen Worten, wenn ein Menü / Inhaltsbereich / was auch immer bei 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 sowie Zeldmans Beitrag über Ethan Marcotte und wie sich das reaktionsschnelle Webdesign aus der ursprünglichen Idee entwickelt hat.
Verwenden Sie semantisches Markup
Ferner ist die einfachere und semantische die DOM - Struktur mit
nav
,header
,main
,section
,footer
usw. (Abscheulichkeiten wie die Vermeidungdiv class="header"
mit verschachtelten innerendiv
desto leichter Tags) wird es Ingenieur Ansprechbarkeit, vor allem Schwimmer unter Verwendung Vermeidung CSS Grid - Layouts (Sarah Drasner des Gittergenerator a großartiges Werkzeug dafür) und Flexbox zum Anordnen und Nachbestellen gemäß Ihrem RWD-Entwurfsplan.quelle
Wenn Sie auf ein Gerät abzielen möchten, schreiben Sie einfach
min-device-width
. Zum Beispiel:Für iPhone
Für Tabletten
Hier sind einige gute Artikel:
quelle
@media only screen and (min-device-width: 1024){}
oder so etwas, um diese Änderungen zu überschreiben. Alternativ können Sie dies tun,@media only screen and (MAX-device-width: 1024){}
wenn Sie mit einem Desktop-Design begonnen haben und Änderungen nur an Dingen vornehmen möchten, die kleiner als 1024 sind.Ich habe diese Seite benutzt , um die Auflösung zu finden und CSS nach tatsächlichen Zahlen zu entwickeln. Meine Zahlen weichen ziemlich stark von den obigen Antworten ab, außer dass mein CSS tatsächlich die gewünschten Geräte trifft.
Lassen Sie diesen Code auch direkt nach Ihrer Medienabfrage debuggen, z. B.:
Fügen Sie dieses Debugging-Element in jede einzelne Medienabfrage ein, und Sie werden sehen, welche Abfrage angewendet wurde.
quelle
Die besten von Twitter Bootstrap empfohlenen Haltepunkte
quelle
Medienabfragen für allgemeine Geräte-Haltepunkte
quelle
quelle
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 vollständige Erklärung dieses Problems finden Sie hier: Was genau ist das Pixelverhältnis des Geräts?
Bei Abfragen bei "@media" werden die Pixelanzahl und das Pixelverhältnis des Geräts berücksichtigt. Dies führt zu einer "virtuellen Auflösung", die Sie beim Entwerfen Ihrer Seite berücksichtigen müssen: Wenn Ihre Schriftart eine feste Breite von 10 Pixel hat und die " virtuelle horizontale Auflösung "beträgt 300 px, 30 Zeichen werden benötigt, um eine Zeile zu füllen.
quelle
Heutzutage sind Retina-Bildschirmgeräte am häufigsten zu sehen, mit anderen Worten: Geräte mit hohen Auflösungen und einer sehr hohen Pixeldichte (normalerweise jedoch kleiner als 6 Zoll physische Größe). Aus diesem Grund benötigen Sie spezielle Medienabfragen für die Retina-Anzeige in Ihrem CSS. Dies ist das vollständigste Beispiel, das ich finden konnte:
Quelle: CSS-Tricks-Website
quelle
Da es viele Variierung Bildschirmgrößen sind , die sich jederzeit ändern und wahrscheinlich wird immer die beste Art und Weise ändern zu gehen , ist zu Ihrer Basis Bruchstellen und Medien - Abfragen auf Ihrem Design.
Der einfachste Weg, dies zu tun, besteht darin, Ihr fertiges Desktop-Design zu greifen und es in Ihrem Webbrowser zu öffnen. Verkleinern Sie den Bildschirm langsam , um ihn schmaler zu machen. Beobachten Sie, wann das Design zu "brechen" beginnt oder schrecklich und eng aussieht. Zu diesem Zeitpunkt wäre ein Haltepunkt mit einer Medienabfrage erforderlich.
Es ist üblich, drei Sätze von Medienabfragen für Desktop, Tablet und Telefon zu erstellen. Aber wenn Ihr Design auf allen drei gut aussieht, warum sollten Sie sich dann mit der Komplexität beschäftigen, drei verschiedene Medienabfragen hinzuzufügen, die nicht erforderlich sind? Tun Sie es nach Bedarf!
quelle
Ein zusätzliches Feature ist , können Sie auch nutzen-Medienanfragen in dem Medien - Attribute des
<link>
Tags.Damit wird der Browser alle CSS - Ressourcen herunterladen, unabhängig von dem Medien - Attribute. Der Unterschied besteht darin, dass, wenn die Medienabfrage des Medienattributs als falsch ausgewertet wird, diese CSS-Datei und sein Inhalt nicht gerendert werden.
Daher wird empfohlen , die verwenden Medien - Attribut im
<link>
Tag , da es eine bessere Benutzererfahrung garantiert.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, mit denen Sie die Trennung Ihres CSS-Codes in verschiedene Dateien gemäß Ihren Medienabfragen automatisieren können
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
quelle
Das Verhalten ändert sich auf dem Desktop nicht. Aber auf Tablets und Handys erweitere ich die Navigationsleiste, um das große Logo-Bild abzudecken. Hinweis: Verwenden Sie den Rand (oben und unten) so oft, wie Sie für Ihre Logohöhe benötigen.
In meinem Fall haben 60px oben und unten perfekt funktioniert!
Überprüfen Sie die Navigationsleiste hier .
quelle
quelle
Ich benutze folgende, um meine Arbeit zu erledigen.
quelle
quelle