Medya Sorguları: Masaüstü, tablet ve mobil cihaz nasıl hedeflenir?

Medya sorguları hakkında biraz araştırma yapıyorum ve hala belirli boyutlardaki cihazları nasıl hedefleyeceğimizi tam olarak anlayamıyorum.

Masaüstü, tablet ve mobil cihazları hedeflemek istiyorum. Bazı tutarsızlıklar olacağını biliyorum, ancak bu cihazları hedeflemek için kullanılabilecek genel bir sisteme sahip olmak güzel olurdu.

Bulduğum bazı örnekler:

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

Veya:

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

Her cihaz için kesme noktaları ne olmalıdır?

IMO bunlar en iyi kesme noktalarıdır:

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

Düzenleme : 960 ızgaralarla daha iyi çalışacak şekilde rafine edildi:

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

Pratikte, birçok tasarımcı pikselleri ems'e dönüştürür, büyük ölçüde b / c ems daha iyi yakınlaştırma sağlar. Standart zumda 1em === 16px. 1em/16pxEMS almak için pikselleri çarpın . Örneğin 320px === 20em,.

Yoruma yanıt olarak, min-width"mobil ilk" tasarımda standarttır, burada en küçük ekranlarınız için tasarım yaparak işe başlarsınız ve daha sonra sürekli artan medya sorguları ekleyerek sizi daha büyük ve daha büyük ekranlara yönlendirirsiniz. Tercih ederseniz veya bunların kombinasyonlarından bağımsız olarak min-, max-birden fazla kural aynı öğeyle eşleşirse sonraki kuralların önceki kuralları geçersiz kılacağını aklınızda bulundurun.

Belirli cihazları veya boyutları hedeflemeyin!

Genel bilgelik olan belirli cihazları veya boyutunu hedeflemek için değil , fakat terimi kesme noktası 'reframe:

• siteyi mobil cihazlar için önce piksel değil yüzdeleri veya ems kullanarak geliştirmek ,
• daha büyük bir görüntü alanında deneyin ve nerede başarısız olmaya başladığını not edin,
• düzeni yeniden tasarlayın ve sadece kırık parçaları işlemek için bir CSS medya sorgusu ekleyin,
• sonraki kesme noktasına ulaşıncaya kadar işlemi tekrarlayın.

Sen kullanabilirsiniz responsivepx.com olduğu gibi 'doğal' kesme noktaları bulmak için Marc Drummond tarafından 'kırılma noktaları öldü' .

Doğal kesme noktaları kullanın

Daha sonra 'kesme noktaları' mobil tasarımınızın 'kırılmaya' başladığı gerçek nokta olur, yani kullanılabilir veya görsel olarak hoş olmayı bırakır. İyi çalışan bir mobil siteniz olduğunda, medya sorguları olmadan, belirli boyutlar hakkında endişelenmeyi bırakabilir ve yalnızca daha büyük görünüm pencerelerini işleyen medya sorguları ekleyebilirsiniz.

Bir tasarımı tam ekran boyutuna sabitlemeye çalışmıyorsanız, bu yaklaşım belirli cihazları hedefleme ihtiyacını ortadan kaldırarak çalışır . Her kesme noktası olarak tasarım kendisinin bütünlüğü teminat altın her boyuttaki kadar yapacağı açıklandı. Başka bir deyişle, bir menü / içerik bölümü / belirli bir boyutta kullanılmayı durduran ne olursa olsun , belirli bir cihaz boyutu için değil , bu boyut için bir kesme noktası tasarlayın .

Lyza Gardner'ın davranışsal kırılma noktaları hakkındaki yazısına ve ayrıca Zeldman'ın Ethan Marcotte ve duyarlı web tasarımının ilk fikirden nasıl evrimleştiğine dair yazısına bakın .

Anlamsal işaretleme kullan

Ayrıca, daha basit ve daha semantik DOM yapısı ile nav, header, main, section, footervb (gibi iğrenç kaçınarak div class="header"iç içe iç ile divetiketleri) o kadar kolay özellikle kullanarak yüzer kaçınarak, mühendis yanıt olacak CSS Izgara Düzeni Sarah Drasner en ( ızgara jeneratör bir olduğunu bunun için harika bir araç) ve RWD tasarım planınıza göre düzenlemek ve yeniden sipariş vermek için flexbox .

Bir cihazı hedeflemek istiyorsanız yazın min-device-width. Örneğin:

İphone için

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

Tabletler için

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

İşte bazı iyi makaleler:

• Apple iPad için web sitenize nasıl uyulur
• CSS3 Medya Sorguları

1. Bu siteyi çözünürlüğü bulmak için kullandım ve gerçek sayılar başına CSS geliştirdim. Numaralarım yukarıdaki cevaplardan biraz farklıdır, ancak CSS'm aslında istenen cihazlara vurur.

2. Ayrıca, bu hata ayıklama kod parçasını medya sorgunuzdan hemen sonra kullanın:

   @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;
     }
   } 

   Bu hata ayıklama öğesini her bir medya sorgusuna ekleyin, hangi sorgunun uygulandığını göreceksiniz.

Twitter Bootstrap tarafından önerilen en iyi kesme noktaları

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

    }

Genel cihaz kesme noktaları için medya sorguları

/* 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. Ekstra küçük cihazlar (telefonlar, 480 piksele kadar)
2. Küçük cihazlar (tabletler, 768 piksel ve üstü)
3. Orta boy cihazlar (büyük yatay tabletler, dizüstü bilgisayarlar ve masaüstü bilgisayarlar, 992 piksel ve üstü)
4. Büyük cihazlar (büyük masaüstü bilgisayarlar, 1200 piksel ve üstü)
5. portre e-okuyucu (Nook / Kindle), daha küçük tabletler - minimum genişlik: 481 piksel
6. portre tabletleri, portre iPad, yatay e-okuyucular - min-genişlik: 641px
7. tablet, yatay iPad, lo-res dizüstü bilgisayarlar - min-genişlik: 961px
8. HTC One cihaz genişliği: 360px cihaz yüksekliği: 640px -webkit-device-pixel-oran: 3
9. Samsung Galaxy S2 cihaz genişliği: 320 piksel cihaz yüksekliği: 534 piksel -webkit-cihaz-piksel-oranı: 1.5 (min - moz-cihaz-piksel-oranı: 1.5), (-o-min-cihaz-piksel-oranı: 3/2), (min-cihaz-piksel oranı: 1.5
10. Samsung Galaxy S3 cihaz genişliği: 320px cihaz yüksekliği: 640px -webkit-device-piksel-oran: 2 (min - moz-cihaz-piksel-oran: 2), - Eski Firefox tarayıcıları (Firefox 16'dan önce) -
11. Samsung Galaxy S4 cihaz genişliği: 320 piksel cihaz yüksekliği: 640 piksel -webkit-cihaz-piksel-oranı: 3
12. LG Nexus 4 cihaz genişliği: 384 piksel cihaz yüksekliği: 592 piksel -webkit-cihaz-piksel-oranı: 2
13. Asus Nexus 7 cihaz genişliği: 601 piksel cihaz yüksekliği: 906 piksel -webkit-min-cihaz-piksel oranı: 1.331) ve (-webkit-max-cihaz-piksel oranı: 1.332)
14. iPad 1 ve 2, iPad Mini cihaz genişliği: 768 piksel cihaz yüksekliği: 1024 piksel -webkit-cihaz-piksel oranı: 1
15. iPad 3 ve 4 cihaz genişliği: 768 piksel cihaz yüksekliği: 1024 piksel -webkit-cihaz-piksel oranı: 2)
16. iPhone 3G cihaz genişliği: 320 piksel cihaz yüksekliği: 480 piksel -webkit-cihaz-piksel oranı: 1)
17. iPhone 4 cihaz genişliği: 320 piksel cihaz yüksekliği: 480 piksel -webkit-cihaz-piksel oranı: 2)
18. iPhone 5 cihaz genişliği: 320 piksel cihaz yüksekliği: 568 piksel -webkit-cihaz-piksel oranı: 2)

Piksel sayısı meselesi değil, ekranda piksel yoğunluğuna bağlı olan gerçek boyuttaki (mm veya inç cinsinden) karakter meselesi. Dolayısıyla "min-width:" ve "max-width:" işe yaramaz. Bu sorunun tam bir açıklaması burada: cihaz piksel oranı tam olarak nedir?

"@media" sorguları piksel sayısını ve cihaz piksel oranını dikkate alarak sayfanızı tasarlarken göz önünde bulundurmanız gereken "sanal çözünürlük" ile sonuçlanır: yazı tipiniz 10 piksel sabit genişlik ve " sanal yatay çözünürlük "300 pikseldir, bir satırı doldurmak için 30 karakter gerekecektir.

Günümüzde en yaygın şey retina ekranlı cihazları, başka bir deyişle: yüksek çözünürlüklü ve çok yüksek piksel yoğunluğuna sahip (ancak genellikle 6 inç fiziksel boyuttan daha küçük) cihazları görmek. Bu nedenle CSS'nizde retina özel medya sorgularını görüntülemeniz gerekecektir. Bulabildiğim en eksiksiz örnek:

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

}

Kaynak: CSS-Tricks Web Sitesi

Her zaman değişen ve büyük olasılıkla her zaman en iyi yolu değiştirecek birçok farklı ekran boyutu olduğundan, kırılma noktalarınızı ve medya sorgularınızı tasarımınıza dayandırmaktır.

Bunu yapmanın en kolay yolu, tamamlanmış masaüstü tasarımınızı alıp web tarayıcınızda açmaktır. Küçült ekranı yavaşça o dar yapmak için. Tasarımın ne zaman başlayacağını gözlemleyin, "kırın" veya korkunç ve sıkışık göründüğünü . Bu noktada, medya sorgusuna sahip bir kırılma noktası gerekecektir.

Masaüstü, tablet ve telefon için üç set medya sorgusu oluşturmak yaygındır. Ancak tasarımınız her üçünde de iyi görünüyorsa, neden gerekli olmayan üç farklı medya sorgusu eklemenin karmaşıklığıyla uğraşın. Gerektiği gibi yapın!

Ek bir özellik de etiketin media özelliğinde medya sorgularını kullanabilmenizdir <link>.

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

Bununla tarayıcı, ortam özelliğine bakılmaksızın tüm CSS kaynaklarını indirir . Aradaki fark, media özelliğinin medya sorgusu yanlış olarak değerlendirilirse, bu .css dosyası ve içeriğinin oluşturma engellemesi olmayacağıdır.

Bu nedenle, daha iyi bir kullanıcı deneyimi garanti ettiği için etiketteki medya özelliğinin kullanılması önerilir <link>.

Burada bu sorunla ilgili bir Google makalesini okuyabilirsiniz https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Medya sorgularınıza göre css kodunuzun farklı dosyalarda ayrılmasını otomatikleştirmenize yardımcı olacak bazı araçlar

Web paketi 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

Davranış masaüstünde değişmez. Ancak tabletlerde ve cep telefonlarında, gezinme çubuğunu büyük logo görüntüsünü kapsayacak şekilde genişletiyorum. Not: Logo yüksekliğiniz için kenar boşluğunu (üst ve alt) gerektiği kadar kullanın .

Benim durumum için, 60px üst ve alt mükemmel çalıştı!

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

Gezinme çubuğunu buradan kontrol edin .

• Ekstra küçük cihazlar ~ Telefonlar (<768 piksel)
• Küçük cihazlar ~ Tabletler (> = 768 piksel)
• Orta dereceli cihazlar ~ Masaüstü bilgisayarlar (> = 992 piksel)
• Büyük cihazlar ~ Masaüstü bilgisayarlar (> = 1200 piksel)

İşimi yapmak için bir tane kullanıyorum.

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

    }