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

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?

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.

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.

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:

• So passen Sie Ihre Website an das Apple iPad an
• CSS3-Medienabfragen

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.

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) {

    }

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

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)

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.

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

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!

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

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 .

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

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

@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

    }