Zapytania o media: jak kierować reklamy na komputery stacjonarne, tablety i urządzenia mobilne?

Przeprowadziłem badania dotyczące zapytań o media i wciąż nie rozumiem, jak kierować reklamy na urządzenia o określonych rozmiarach.

Chcę mieć możliwość kierowania na komputery stacjonarne, tablety i urządzenia mobilne. Wiem, że będą pewne rozbieżności, ale byłoby miło mieć ogólny system, którego można użyć do atakowania tych urządzeń.

Kilka przykładów znalazłem:

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

Lub:

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

Jakie powinny być punkty przerwania dla każdego urządzenia?

IMO to najlepsze punkty przerwania:

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

Edycja : Udoskonalono, aby działał lepiej z 960 siatkami:

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

W praktyce wielu projektantów konwertuje piksele na ems, w większości b / c ems lepiej pozwolić na powiększanie. Przy standardowym powiększeniu 1em === 16px. Pomnóż liczbę pikseli, 1em/16pxaby uzyskać ems. Na przykład 320px === 20em.

W odpowiedzi na komentarz, min-widthjest standardem w projektowaniu „najpierw na telefon”, w którym zaczynasz od projektowania na najmniejsze ekrany, a następnie dodajesz coraz więcej zapytań o media, pracując na coraz większych ekranach. Niezależnie od tego, czy wolisz min-, max-czy też ich kombinacje, bądź świadomy kolejności swoich reguł, pamiętając, że jeśli wiele reguł pasuje do tego samego elementu, późniejsze reguły zastąpią wcześniejsze reguły.

Nie kieruj reklam na określone urządzenia ani rozmiary!

Ogólna mądrość jest nie do kierowania urządzeń lub konkretnych rozmiarów , ale do przeformułować pojęcie „przerwania”:

• najpierw opracuj witrynę na urządzenia mobilne, używając wartości procentowych lub ems, a nie pikseli,
• następnie wypróbuj go w większej rzutni i zanotuj, gdzie zaczyna się zawodzić,
• przeprojektuj układ i dodaj zapytanie CSS o media, aby poradzić sobie z uszkodzonymi częściami,
• powtarzaj proces, aż dojdziesz do następnego punktu przerwania.

Możesz użyć responsivepx.com, aby znaleźć „naturalne” punkty przerwania, ponieważ w „punktach przerwania nie żyje” Marc Drummond .

Użyj naturalnych punktów przerwania

„Punkty przerwania” stają się wówczas faktycznym punktem, w którym Twój projekt mobilny zaczyna „pękać” tj. Przestaje być użyteczny lub przyjemny wizualnie. Gdy masz już dobrze działającą witrynę mobilną, bez zapytań o media, możesz przestać martwić się o określone rozmiary i po prostu dodać zapytania o media, które obsługują kolejno większe rzutnie.

Jeśli nie próbujesz przypiąć projektu do dokładnego rozmiaru ekranu, to podejście działa, eliminując potrzebę kierowania na określone urządzenia . Integralność samego projektu na każdy punkt przerwania , zapewnia, że będzie trzymać w dowolnym rozmiarze. Innymi słowy, jeśli menu / sekcja zawartości / cokolwiek przestaje być użyteczne dla określonego rozmiaru, należy zaprojektować punkt przerwania dla tego rozmiaru , a nie dla określonego rozmiaru urządzenia.

Zobacz post Lyzy Gardner na temat behawioralnych punktów przerwania , a także post Zeldmana na temat Ethana Marcotte i tego, jak responsywne projektowanie stron internetowych ewoluowało od początkowego pomysłu.

Użyj znaczników semantycznych

Ponadto, prostsze i bardziej semantycznej struktury DOM z nav, header, main, section, footeritd. (Unikanie obrzydliwości jak div class="header"z zagnieżdżonych wewnętrznych divznaczników) łatwiej będzie inżynier reakcji, zwłaszcza unikanie pływaków za pomocą CSS układ siatki (Sarah Drasner za generator siatki jest świetne narzędzie do tego) i Flexbox do aranżacji i ponownego zamawiania zgodnie z planem projektowania RWD.

Jeśli chcesz wycelować w urządzenie, po prostu napisz min-device-width. Na przykład:

Dla iphone

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

Do tabletów

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

Oto kilka dobrych artykułów:

• Jak dopasować swoją witrynę do iPada Apple
• Zapytania o media CSS3

1. Skorzystałem z tej strony, aby znaleźć rozdzielczość i opracowałem CSS według rzeczywistych liczb. Moje liczby różnią się nieco od powyższych odpowiedzi, z wyjątkiem tego, że mój CSS faktycznie trafia na pożądane urządzenia.

2. Również ten fragment kodu do debugowania należy mieć zaraz po zapytaniu o media, np .:

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

   Dodaj ten element debugowania do każdego zapytania multimedialnego, a zobaczysz, jakie zapytanie zostało zastosowane.

Najlepsze punkty przerwania zalecane przez Bootstrap na Twitterze

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

    }

Zapytania o media dla typowych punktów przerwania urządzenia

/* 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. Bardzo małe urządzenia (telefony, do 480 pikseli)
2. Małe urządzenia (tablety, 768 pikseli i więcej)
3. Średnie urządzenia (duże tablety krajobrazowe, laptopy i komputery stacjonarne, 992px i więcej)
4. Duże urządzenia (duże komputery stacjonarne, 1200 pikseli i więcej)
5. portrety elektroniczne (Nook / Kindle), mniejsze tablety - min. szerokość: 481px
6. pionowe tablety, pionowe iPady, czytniki krajobrazu - min. szerokość: 641px
7. tablet, poziomy iPad, laptopy lo-res - minimalna szerokość: 961px
8. HTC One szerokość urządzenia: 360px wysokość urządzenia: 640px-zestaw narzędzi-urządzenie-piksel: 3
9. Samsung Galaxy S2 szerokość urządzenia: 320px wysokość urządzenia: 534px -webkit-device-pixel-ratio: 1,5 (min - moz-device-pixel-ratio: 1,5), (-o-min-device-pixel-ratio: 3/2), (minimalny współczynnik urządzenia-piksela: 1,5
10. Samsung Galaxy S3 szerokość urządzenia: 320px wysokość urządzenia: 640px -webkit-device-pixel-ratio: 2 (min - moz-device-pixel-ratio: 2), - Starsze przeglądarki Firefox (wcześniejsze niż Firefox 16) -
11. Samsung Galaxy S4 szerokość urządzenia: 320px wysokość urządzenia: 640px -webkit-device-pixel-ratio: 3
12. LG Nexus 4 szerokość urządzenia: 384px wysokość urządzenia: 592px -webkit-device-pixel-ratio: 2
13. Asus Nexus 7 szerokość urządzenia: 601px wysokość urządzenia: 906px -webkit-min-device-pixel-ratio: 1.331) i (-webkit-max-device-pixel-ratio: 1.332)
14. iPad 1 i 2, iPad Mini szerokość urządzenia: 768px wysokość urządzenia: 1024px-zestaw narzędzi-urządzenie-piksel: 1
15. iPad 3 i 4 szerokość urządzenia: 768px wysokość urządzenia: 1024px -webkit-device-pixel-ratio: 2)
16. iPhone 3G szerokość urządzenia: 320 pikseli wysokość urządzenia: 480 pikseli stosunek web-urządzenie-liczba pikseli: 1)
17. iPhone 4 szerokość urządzenia: 320px wysokość urządzenia: 480px-zestaw narzędzi-urządzenie-piksel: 2)
18. iPhone 5 szerokość urządzenia: 320px wysokość urządzenia: 568px -webkit-device-pixel-ratio: 2)

Nie chodzi o liczbę pikseli, chodzi o rzeczywisty rozmiar (w mm lub calach) znaków na ekranie, który zależy od gęstości pikseli. Dlatego „min-width:” i „max-width:” są bezużyteczne. Pełne wyjaśnienie tego problemu znajduje się tutaj: czym dokładnie jest współczynnik pikseli urządzenia?

Zapytania „@media” uwzględniają liczbę pikseli i współczynnik pikseli urządzenia, w wyniku czego uzyskuje się „wirtualną rozdzielczość”, którą należy wziąć pod uwagę podczas projektowania strony: jeśli czcionka ma stałą szerokość 10 pikseli, a „ wirtualna rozdzielczość pozioma ”wynosi 300 pikseli, do wypełnienia wiersza potrzeba 30 znaków.

W dzisiejszych czasach najczęstszą rzeczą jest widzenie urządzeń z ekranem siatkówki, innymi słowy: urządzeń o wysokiej rozdzielczości i bardzo dużej gęstości pikseli (ale zwykle o wielkości fizycznej mniejszej niż 6 cali). Dlatego będziesz potrzebować wyświetlania CSS specjalistycznych zapytań o media. To jest najbardziej kompletny przykład, jaki mogłem znaleźć:

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

}

Źródło: strona internetowa CSS-Tricks

Ponieważ istnieje wiele różnych rozmiarów ekranów, które zawsze się zmieniają i najprawdopodobniej zawsze będą się zmieniać, najlepszym rozwiązaniem jest oparcie punktów przerwania i zapytań o media na projekcie.

Najłatwiejszym sposobem na zrobienie tego jest pobranie gotowego projektu pulpitu i otwarcie go w przeglądarce internetowej. Kurczyć ekran powoli , aby węższa. Obserwuj, kiedy projekt zaczyna „łamać” lub wygląda okropnie i ciasno. W tym momencie wymagany byłby punkt przerwania z zapytaniem o media.

Często tworzy się trzy zestawy zapytań o media dla komputerów stacjonarnych, tabletów i telefonów. Ale jeśli twój projekt wygląda dobrze na wszystkich trzech, po co zawracać sobie głowę złożonością dodawania trzech różnych zapytań o media, które nie są konieczne. Zrób to w razie potrzeby!

Jedną dodatkową funkcją jest to, że można również użyć zapytań o media w atrybucie media<link> tagu.

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

Dzięki temu przeglądarka pobierze wszystkie zasoby CSS, niezależnie od atrybutu media . Różnica polega na tym, że jeśli zapytanie medialne atrybutu media zostanie ocenione na false, to plik .css i jego zawartość nie będą blokowały renderowania.

Dlatego zaleca się użycie atrybutu media w <link>tagu, ponieważ gwarantuje to lepszą obsługę.

Tutaj możesz przeczytać artykuł Google na temat tego problemu https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Niektóre narzędzia, które pomogą zautomatyzować separację kodu css w różnych plikach zgodnie z zapytaniami o media

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

Zachowanie nie zmienia się na pulpicie. Ale na tabletach i telefonach komórkowych rozszerzam pasek nawigacyjny, aby zakrył duży obraz logo. Uwaga: użyj marginesu (góra i dół) tyle, ile potrzebujesz na wysokość logo.

W moim przypadku górna i dolna 60 pikseli działała idealnie!

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

Sprawdź pasek nawigacyjny tutaj .

• Bardzo małe urządzenia ~ Telefony (<768px)
• Małe urządzenia ~ Tablety (> = 768px)
• Średnie urządzenia ~ komputery stacjonarne (> = 992px)
• Duże urządzenia ~ Komputery stacjonarne (> = 1200 pikseli)

Korzystam z poniższego, aby wykonać swoją pracę.

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

    }