Medienabfragen: Wie ziele ich auf Desktop, Tablet und Handy ab?

470

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?

Betamax
quelle

Antworten:

643

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

Bearbeiten : Verfeinert, um mit 960 Gittern besser zu arbeiten:

@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 konvertieren viele Designer Pixel in Ems. B / C-Ems leisten sich das Zoomen besser. Bei Standardzoom 1em === 16px. Multipliziere Pixel mit 1em/16px, um ems zu erhalten. Zum Beispiel 320px === 20em.

Die Reaktion auf den Kommentar min-widthist 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 bevorzugen min-, 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.

Ryanve
quelle
1
Ich habe mich gefragt, ob ich die Untergrenze für Medienabfragen erhöhen soll. Scheint logisch, habe es aber nicht zu oft erwähnt. Ich würde sogar noch einen Schritt weiter gehen und zu ems konvertieren. Schauen Sie sich @ jonikorpi-Screenshots des Site-Verhaltens von Ethan Marcotte mit Zoom- und px-Medienabfragen an. github.com/scottjehl/Respond/issues/18
Larry
21
Warum sollten Sie Min-Breite anstelle von Max-Breite verwenden? Wie würden Sie verhindern, dass das min-width: 320pxCSS das überschreibt min-width: 801px?
user2019515
2
Dieser Code funktioniert auf meinen Mobilgeräten nicht! Kann jemand ein funktionierendes Beispiel geben!
Jacob
3
Hat jemand das Äquivalent "max-width" dazu?
Pylinux
6
2018 - 2k und 4k sind auf dem Vormarsch
Alexander
160

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:

  • Entwickeln Sie die Website für Mobilgeräte zuerst mit Prozentsätzen oder Ems, nicht mit Pixeln.
  • Versuchen Sie es dann in einem größeren Ansichtsfenster und notieren Sie, wo es zu scheitern beginnt.
  • Entwerfen Sie das Layout neu und fügen Sie eine CSS-Medienabfrage hinzu, um die defekten Teile zu behandeln.
  • Wiederholen Sie den Vorgang, bis Sie den nächsten Haltepunkt erreichen.

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, footerusw. (Abscheulichkeiten wie die Vermeidung div class="header"mit verschachtelten inneren divdesto 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.

Dave Everitt
quelle
10
Der Kunde möchte, dass seine Website auf seinem iPad so aussieht. Mein bester Haltepunkt würde dazu führen, dass die Site auf dem iPad auf mobiles Layout umschaltet. Der Kunde würde das nicht akzeptieren, er möchte, dass eine ausgefallene Version auf dem iPad und anderen Tablets angezeigt wird. Allgemeine Weisheit zahlt mein Gehalt nicht :) Ich musste Tricks mit dem Meta-Tag des Ansichtsfensters machen. Es war sehr schmerzhaft, aber ich habe es mit ein wenig Hilfe von JavaScript (wie immer) geschafft. PS: Ich habe cm-Einheiten verwendet, keine Pixel.
Rolf
Mit natürlichen Haltepunkten können Sie einen mittelgroßen Haltepunkt haben, der das iPad (und andere Tablets) im Querformat enthält, oder einen anderen Haltepunkt für den Hochformatmodus hinzufügen. Ich habe manchmal vier Haltepunkte verwendet, wobei CSS und alle Markups immer mit Mobile-First gestartet wurden (es ist schwieriger, das Bild zu verkleinern und sich auf das Handy zu konzentrieren, was bedeutet, dass Ihr Design und Ihr Inhalt auf das Wesentliche reduziert sind, das Sie mit zunehmender Größe erweitern können). , eine knapp über 400 Pixel breit (oder "über der mobilen Größe"), dann zwei Desktop-Größen, eine extra breit. Sie können dann den Haltepunkt "über dem Handy" so gestalten, dass er auf dem iPad gut funktioniert.
Dave Everitt
2
Dies reicht nicht für alle Fälle aus. Nehmen Sie zum Beispiel Kontrollkästchen. Sie sind möglicherweise für alle Webbrowser auf einem PC in Ordnung, auf einem Tablet jedoch zu klein, als dass der Benutzer sie berühren könnte. Manchmal müssen Sie auf Geräte zielen, egal ob dies allgemeine Weisheit ist oder nicht. Dies ist ein guter Artikel: html5rocks.com/de/mobile/cross-device
monalisa717
2
Ich bin mit Dave in diesem Fall - es gibt so viele Geräte, dass Sie nicht für alle entwerfen können. Durch die Verwendung natürlicher Haltepunkte wird sichergestellt, dass Ihre Site unabhängig von der verfügbaren Bildschirmgröße funktioniert. Wenn Kunden möchten, dass ihre Website auf eine bestimmte Weise aussieht, müssen Sie sie schulen. Wenn Kontrollkästchen zu klein sind - wo sind Ihre Etiketten?
Diggersworld
@ user1411056 - guter Artikel. Ich denke, es hängt davon ab, was Sie anstreben und wie Ihre Website / Webapp funktioniert. Ich würde sagen, dass ein grundlegendes Responsive Design alles unterstützen sollte, bevor Verbesserungen vorgenommen werden. diggersworld Ich bin alles für die Aufklärung von Kunden - warum bezahlen sie dich sonst noch? Und ja, Kontrollkästchen können reagieren. Das Tippen auf ein Etikett ist gleichwertig und Etiketten können gestylt werden. Dann gibt es die Nutzlosigkeit des Schwebens auf Touch-Geräten; das kann große Bildschirme haben, und die 300ms Tap-Verzögerung . Eine grundlegende RD-Grundlage, die von JS erweitert wurde.
Dave Everitt
154

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

Für iPhone

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

Für Tabletten

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

Hier sind einige gute Artikel:

Sandeep
quelle
32
Mein Tablet hat eine Breite von 2560x1600
LeeGee
36
Das mag sein, aber Browser auf Mobilgeräten haben ein "Gerätepixelverhältnis". Hier wird jedes logische "Pixel" als 2, 3 oder sogar mehr tatsächliche Pixel auf Ihrem Gerät behandelt. Andernfalls wäre ein 20px hoch sehr klein und unmöglich zu drücken - besonders auf Ihrem Bildschirm!
Greg84
6
@media only screen und (min-device-width: 480px) {} Ich habe es versucht - passt auch für Desktops. Aber was ist, wenn wir nur mobile Geräte wollen?
Darius.V
@ Darius.V, dies folgt der "Mobile First" -Mentalität, das heißt, Sie starten mobil und nehmen dann Änderungen vor, wenn der Bildschirm größer wird. Sie müssen also auch Folgendes einschließen: @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.
Steely,
Dies bedeutet, dass der Desktop aufgrund der minimalen Gerätebreite nicht mit RWD funktioniert. Es wird empfohlen, min-width und nichts gerätebasiertes zu tun. True Responsive sollte keine Aktualisierung oder Gerätebeschränkung erfordern
TheBlackBenzKid
50
  1. 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.

  2. Lassen Sie diesen Code auch direkt nach Ihrer Medienabfrage debuggen, z. B.:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { 
      /* for 10 inches tablet screens */
      body::before {
        content: "tablet to some desktop media query (769 > 1281) fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
      }
    } 

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

user2060451
quelle
27

Die besten von Twitter Bootstrap empfohlenen Haltepunkte

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

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }
Santosh Khalse
quelle
25

Medienabfragen für allgemeine Geräte-Haltepunkte

/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Purvik Dhorajiya
quelle
19
  1. Extra kleine Geräte (Telefone, bis zu 480px)
  2. Kleine Geräte (Tablets, 768px und höher)
  3. Mittlere Geräte (große Landschaftstablets, Laptops und Desktops ab 992 Pixel)
  4. Große Geräte (große Desktops, 1200px und höher)
  5. Porträt-E-Reader (Nook / Kindle), kleinere Tablets - Mindestbreite: 481px
  6. Porträt-Tablets, Porträt-iPad, Landschafts-E-Reader - Mindestbreite: 641px
  7. Tablet, Landschafts-iPad, Laptops mit niedriger Auflösung - Mindestbreite: 961 Pixel
  8. HTC One Gerätebreite: 360px Gerätehöhe: 640px-Webkit-Geräte-Pixel-Verhältnis: 3
  9. Samsung Galaxy S2 Gerätebreite: 320px Gerätehöhe: 534px-Webkit-Gerätepixelverhältnis: 1,5 (min - Moz-Gerätepixelverhältnis: 1,5), (-o-min-Gerätepixelverhältnis: 3/2), (min-Geräte-Pixel-Verhältnis: 1,5
  10. Samsung Galaxy S3 Gerätebreite: 320px Gerätehöhe: 640px-Webkit-Geräte-Pixel-Verhältnis: 2 (min - Moz-Geräte-Pixel-Verhältnis: 2), - Ältere Firefox-Browser (vor Firefox 16) -
  11. Samsung Galaxy S4 Gerätebreite: 320px Gerätehöhe: 640px-Webkit-Geräte-Pixel-Verhältnis: 3
  12. LG Nexus 4 Gerätebreite: 384px Gerätehöhe: 592px-Webkit-Geräte-Pixel-Verhältnis: 2
  13. Asus Nexus 7 Gerätebreite: 601px Gerätehöhe: 906px-Webkit-Min-Geräte-Pixel-Verhältnis: 1,331) und (-Webkit-Max-Geräte-Pixel-Verhältnis: 1,332)
  14. iPad 1 und 2, iPad Mini Gerätebreite: 768px Gerätehöhe: 1024px-Webkit-Geräte-Pixel-Verhältnis: 1
  15. iPad 3 und 4 Gerätebreite: 768px Gerätehöhe: 1024px-Webkit-Geräte-Pixel-Verhältnis: 2)
  16. iPhone 3G Gerätebreite: 320px Gerätehöhe: 480px-Webkit-Geräte-Pixel-Verhältnis: 1)
  17. iPhone 4 Gerätebreite: 320px Gerätehöhe: 480px-Webkit-Geräte-Pixel-Verhältnis: 2)
  18. iPhone 5 Gerätebreite: 320px Gerätehöhe: 568px-Webkit-Geräte-Pixel-Verhältnis: 2)
Web Designer mit Promoter
quelle
1
Sansung Galaxy S3 @media nur Bildschirm und (Gerätebreite: 720px) und (Gerätehöhe: 1280px) und (-webkit-min-Geräte-Pixel-Verhältnis: 2) getestet und funktioniert.
user2060451
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 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.

Jumpjack
quelle
7
Großartig. Wie sollten die Medienabfragen lauten?
PKHunter
4

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:

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

Quelle: CSS-Tricks-Website

Ezequiel Adrian
quelle
4

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!

Robert Rocha
quelle
3

Ein zusätzliches Feature ist , können Sie auch nutzen-Medienanfragen in dem Medien - Attribute des <link>Tags.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

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

Juanma Menendez
quelle
2

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!

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

Überprüfen Sie die Navigationsleiste hier .

Pratik Khadloya
quelle
2
  • Extra kleine Geräte ~ Telefone (<768px)
  • Kleine Geräte ~ Tablets (> = 768px)
  • Mittlere Geräte ~ Desktops (> = 992px)
  • Große Geräte ~ Desktops (> = 1200px)
Bekzat
quelle
2

Ich benutze folgende, um meine Arbeit zu erledigen.

/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Mayank Dudakiya
quelle
-1
@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }
Shailesh
quelle