Media Queries: jak kierować na komputer, tablet i telefon komórkowy?

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

Dla iPhone

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

Do tabletek

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

Oto kilka dobrych artykułów:

• Jak dopasować swoją stronę do Apple iPad
• CSS3 Media Queries

Nie celuj w określone urządzenia lub rozmiary!

Ogólna mądrość to nie celowanie w określone urządzenia lub rozmiary , ale ponowne sformułowanie terminu "punkt przerwania":

• rozwiń stronę dla mobile first używając procentów lub ems, nie pikseli,
Następnie spróbuj w większym oknie i zauważ, gdzie zaczyna się to nie udać.]}
• przeprojektuj układ i dodaj Zapytanie o media CSS, aby obsłużyć uszkodzone części,
• powtórz proces, aż dotrzesz do następny punkt przerwania.

Możesz użyć responsivepx.com aby znaleźć "naturalne" punkty przerwania, jak w "punkty przerwania są martwe" marca Drummonda .

Użyj naturalnych punktów przerwania

"punkty przerwania" stają się faktycznym punktem , w którym projekt mobilny zaczyna się "łamać" , tzn. przestaje być użyteczny lub przyjemny wizualnie. Gdy już masz 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ą sukcesywnie większe viewporty.

Jeśli nie próbujesz przypiąć projektu do dokładnego rozmiaru ekranu, takie podejście działa poprzez eliminując potrzebę kierowania konkretnych urządzeń . Integralność projektu w każdym punkcie przerwania zapewnia, że utrzyma się on w dowolnym rozmiarze. Innymi słowy, jeśli menu/sekcja treści/cokolwiek przestanie być użyteczne w określonym rozmiarze, Zaprojektuj punkt przerwania dla tego rozmiaru, Nie dla określonego urządzenia rozmiar.

1. Użyłem tej Strony , aby znaleźć rozdzielczość i rozwinął CSS na rzeczywiste liczby. Moje liczby różnią się nieco od powyższych odpowiedzi, z tym wyjątkiem, że mój css faktycznie trafia na pożądane urządzenia.

2. Również, mieć ten fragment kodu debugowania zaraz po zapytaniu o media: Na przykład:

   @media only screen and (min-width: 769px) and (max-width: 1281px) { /* 10 inch tablet enter here */
     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;
     }
   } 
   

   Mam to w sieci, nie pamiętam dokładnie strony. Dodaj ten element debugowania do każdego zapytania o media, a zobaczysz, jakie zapytanie zostało zastosowane.

Najlepsze punkty przerwania zalecane przez Twitter Bootstrap

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

    }

Media queries for common device breakpoints

/* 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 małe urządzenia (telefony, do 480px)
2. małe urządzenia (Tablety, 768px i więcej)
3. urządzenia Średnie (Duże tablety, laptopy i komputery stacjonarne, 992px i w górę)
4. duże urządzenia (Duże komputery stacjonarne, 1200px i więcej)
5. e-czytniki portretowe (Nook/Kindle), mniejsze Tablety - min-szerokość:481px
6. Tablety portretowe, iPad portretowy, e-czytniki krajobrazowe-min-width: 641px
7. tablet, iPad, laptopy lo-res-min-width: 961px
8. HTC Jedno urządzenie-szerokość: 360px urządzenie-wysokość: 640px-webkit-urządzenie-Pixel-ratio: 3
9. Samsung Galaxy S2 device-width: 320px device-height: 534px-webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (- o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5
10. Urządzenie Samsung Galaxy S3-szerokość: 320px urządzenie-wysokość: 640px-webkit-urządzenie-pixel-ratio: 2 (min--moz-urządzenie-Pixel-ratio: 2), - starsze przeglądarki Firefox (przed Firefox 16) -
11. Urządzenie Samsung Galaxy S4-szerokość: 320px urządzenie-wysokość: 640px-webkit-urządzenie-pixel-ratio: 3
12. urządzenie LG Nexus 4-Szerokość: 384px urządzenie-wysokość: 592px-webkit-urządzenie-pixel-ratio: 2
13. urządzenie Asus Nexus 7-szerokość: 601px urządzenie-wysokość: 906px w związku z tym, że nie jest to możliwe, nie jest to możliwe.]}
14. iPad 1 i 2, ipad mini urządzenie-szerokość: 768px urządzenie-wysokość: 1024px-webkit-urządzenie-pixel-ratio: 1
15. iPad 3 i 4-Szerokość urządzenia: 768px device-height: 1024px-webkit-device-pixel-ratio: 2)
16. urządzenie iPhone 3G-szerokość: 320px urządzenie-wysokość: 480px-webkit-urządzenie-Pixel-ratio: 1)
17. iPhone 4 urządzenie-szerokość: 320px urządzenie-wysokość: 480px-webkit-urządzenie-pixel-ratio: 2)
18. iPhone 5 device-width: 320px device-height: 568px-webkit-device-pixel-ratio: 2)

To nie kwestia liczby pikseli, to kwestia rzeczywistego rozmiaru (w mm lub calach) znaków na ekranie, który zależy od gęstości pikseli. Stąd "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" biorą pod uwagę liczbę pikseli i współczynnik pikseli urządzenia, co skutkuje "wirtualną rozdzielczością", która jest tym, co musisz wziąć pod uwagę podczas projektowania strony: jeśli twoja czcionka ma stałą szerokość 10px, a "wirtualna Rozdzielczość pozioma" to 300 px, do wypełnienia wiersza potrzebne będzie 30 znaków.

Ponieważ istnieje wiele różnych rozmiarów ekranu, które zawsze się zmieniają i najprawdopodobniej zawsze się zmienią, najlepszym sposobem jest oparcie punktów przerwania i mediaqueries na projekcie.

Najprostszym sposobem na to jest chwycenie gotowego projektu pulpitu i otwarcie go w przeglądarce internetowej. Zmniejsz ekran powoli, aby był węższy. Obserwuj, aby zobaczyć, kiedy projekt zaczyna się "łamać" lub wyglądać okropnie i ciasno. W tym momencie punkt przerwania z zapytaniem o media byłby wymagane.

Często tworzy się trzy zestawy zapytań multimedialnych dla komputera stacjonarnego, tabletu i telefonu. 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 miarę potrzeb.

Śledzenie mnie zadziałało. Zachowanie nie zmienia się na pulpicie. Ale na tabletach i urządzeniach mobilnych rozszerzam pasek nawigacyjny, aby pokryć duży obraz logo. Uwaga: używaj marginesu (górnego i dolnego) tyle, ile potrzebujesz do wysokości logo. W moim przypadku 60px góra i dół działały idealnie. Sprawdź pasek nawigacyjny Tutaj .

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

Obecnie najczęstszą rzeczą jest oglądanie urządzeń z ekranem retina, innymi słowy: urządzeń o wysokiej rozdzielczości i bardzo dużej gęstości pikseli(ale zwykle mniejszych niż 6 cali fizycznych). Dlatego będziesz potrzebować retina display specialized media-queries na swoim CSS. 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 */

}

Source: CSS-Tricks Website

Extra small devices ~ Phones (< 768px)
Small devices ~ Tablets (>= 768px)
Medium devices ~ Desktops (>= 992px)
Large devices ~ Desktops (>= 1200px)

@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

    }