wake-up-neo.com

Welche sind die wichtigsten Medienanfragen für die Erstellung eines mobilen Responsive-Designs?

Es gibt viele verschiedene Medienabfragen für mobile Bildschirmgrößen. Es kann überwältigend sein, sie alle beim Entwerfen einer reaktionsschnellen mobilen Site unterzubringen. Welche sind die wichtigsten beim Entwerfen für Handys? Ich habe diesen Artikel gefunden, der die verfügbaren Medienabfragen recht gut beschreibt: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ .

/* 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 */
}

/* 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 (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
42
Matt

Ich würde empfehlen, nach Twitter's Bootstrap mit nur diesen vier Medienabfragen zu nehmen:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Bearbeiten: Die ursprüngliche Antwort (oben) stammt aus Bootstrap Version 2. Bootstrap hat seitdem ihre Medienabfragen in Version 3 geändert. Beachten Sie, dass es keine gibt Explizite Abfrage für Geräte mit einer Auflösung von weniger als 768px. Diese Vorgehensweise wird manchmal als "mobile first" bezeichnet. Alles außerhalb einer Medienabfrage wird auf alle Geräte angewendet. Alles innerhalb eines Medienabfrageblocks erweitert und überschreibt das, was global verfügbar ist, sowie die Stile für alle kleineren Geräte Stellen Sie es sich als progressive Verbesserung für responsives Design vor.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Schau es dir an Bootstrap 3's docs .

85
cjlarose
  1. Design in Prozent und zunächst für einen 15 "+ Bildschirm optimiert.

  2. Überprüfen Sie, welche Komponenten auf einem Telefon angezeigt werden sollen. Behalten Sie nur wichtige Inhalte bei und entfernen Sie Elemente, die nicht funktionieren oder den kleinen Bildschirm überladen. Diese Stile können in @media enthalten sein (maximale Breite: 480px) {...}

  3. Entwerfen Sie Ihre Schaltflächen und interaktiven Komponenten für Finger und nicht für Mäuse, sobald die maximale Größe von 10 Zoll erreicht ist. @Media (max-width: 767px) {...}

  4. Verkleinern Sie die Breite Ihres Browsers. Wenn die Dinge nicht so gut aussehen, betreten Sie die Konsole und finden Sie heraus, welche Stile geändert werden können oder welche Elemente neu gestaltet oder entfernt werden müssen. Markieren Sie, bei welcher Bildschirmbreite sie auftreten, und erstellen Sie eine Medienabfrage.

  5. Überprüfen Sie am Ende Ihre Medienabfragen, um festzustellen, ob einige von ihnen zu Gruppen zusammengefasst werden können (dh wenn Sie eine mit einer Breite von 750 und 767 Pixel haben, können Sie diese auch in der 767 kombinieren).

Wenn Sie mit jQuery zufrieden sind, können Sie hinzufügen

$(window).resize(function(){
  console.log($(window).width());
}); 

um die aktuelle Bildschirmgröße zu erhalten. Fügen Sie ein paar zusätzliche Pixel für ein gutes Maß hinzu.

8
Jonathan Tonge

Der erste von @cjlarose referenzierte Twitter Bootstrap Code setzt voraus, dass Sie Ihr Haupt-CSS für eine Anzeige mit einer Breite zwischen 980px und 1200px erstellt haben. Sie beginnen also im Wesentlichen mit dem Desktop-Design und der Anpassung alle anderen davon.

Ich bin froh, dass Twitter zu "mobile first" in Bootstrap 3. Es ist einer der beliebtesten Ansätze für Medienabfragen und die Art, wie ich es bevorzuge Sie beginnen mit der kleinsten Größe und nicht mit dem Desktop.

Beachten Sie, dass für Ihre bestimmte Site möglicherweise andere Abfragen erforderlich sind als für die, die dort oder in einer anderen Liste aufgeführt sind. Sie sollten Abfragen als Ihre Inhalte Anforderungen hinzufügen, die nicht auf einer festgelegten Vorlage basieren.

Hier sind einige Medienabfragen, die ich am nützlichsten fand. Dies sind nur einige Beispiele:

/* Start with baseline CSS, for the smallest browsers. 
   Sometimes I put this into a separate css file and load it first.
   These are the "mobile first" styles. */

...


/* Then progressively add bigger sizes from small to large */

/* Smartphones start somewhere around here */
@media (min-width: 300px) {
}

/* You might do landscape phones here if your content seems to need it */
@media (min-width: 450px) {
}

/* Starting into tablets somewhere in here */
@media (min-width: 600px) {
}

/* Perhaps bigger tablets */
@media (min-width: 750px) {
}

/* Desktop screen or landscape tablet */
@media (min-width: 900px) {
}

/* A bit bigger if you need some adjustments around here */
@media (min-width: 1100px) {
}

/* Widescreens */
@media (min-width: 1500px) {
}

Das Wichtigste ist, dass Sie möglicherweise nicht alle benötigen oder die Zahlen ändern möchten, je nachdem, wie Ihr Inhalt aussieht. Ich glaube nicht, dass es wirklich strenge Regeln dafür gibt, wie viele oder wo Sie Ihre Haltepunkte setzen sollen. Ich mache gerade eine Site, die zufällig nur einen Haltepunkt benötigt, weil der Inhalt ziemlich einfach ist, aber ich habe auch Sites erstellt, die dem obigen Code ähneln.

Ich habe den Code für die Retina-Anzeige nicht angegeben. Dies ist nützlich, wenn Sie Bilder mit normaler Auflösung gegen Bilder mit hoher Auflösung auf hochauflösenden Displays austauschen, andernfalls ist es nicht wirklich nützlich.

5
nwalton