Media Queries: jak kierować komputery stacjonarne, tablety i urządzenia mobilne?

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":

W tym celu należy utworzyć stronę dla mobile first używając procentów lub ems, a 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ż dotrzeć do następnego punktu 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ę wtedy faktycznym punktem, w którym projekt mobilny zaczyna "pękać" , tzn. przestają być użyteczne lub przyjemne wizualnie. Gdy masz dobrze działającą witrynę mobilną, bez zapytań o media, możesz przestać martwić się o określone rozmiary i wystarczy dodać zapytania o media, które obsługują kolejno większe pola widzenia.

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 zawartości/cokolwiek przestanie być użyteczne w określonym rozmiarze, Zaprojektuj punkt przerwania dla tego rozmiaru, Nie dla określonego urządzenia rozmiar.

Użyj znaczników semantycznych

Dalej prostsza i bardziej semantyczna Struktura DOM z nav, header, main, section, footer itd. (unikanie wstrętów jak {[5] } z zagnieżdżonymi wewnętrznymi znacznikami div) tym łatwiej będzie inżynierować responsywność, zwłaszcza unikanie pływaków przez wykorzystanie CSS Grid Layout (Sarah Drasnerâ ' S grid generator jest do tego świetnym narzędziem) i flexbox do aranżacji i ponownego zamówienia zgodnie z planem projektu RWD.

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

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 e. G:

   @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 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.

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

Ponieważ istnieje wiele różnych rozmiarów ekranów, które zawsze się zmieniają i najprawdopodobniej zawsze się zmienią najlepszym sposobem, aby przejść do Bazy break points i media queries {[2] } on your design.

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, "break", albo wygląda okropnie i ciasno. W tym momencie wymagany byłby punkt przerwania z zapytaniem o media.

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!

• Extra small devices ~ Phones (
• małe urządzenia ~ Tablety (>=768px)
• Medium devices ~ Desktops (>=992px)
• duże urządzenia ~ Komputery Stacjonarne (>= 1200px)

Dodatkową funkcją jest możliwość użycia zapytań-media w atrybucie media tagu <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)">

Dzięki temu przeglądarka pobierze wszystkie zasoby CSS, niezależnie od atrybutu media . różnica polega na tym, że jeśli media-query atrybutu media zostanie ocenione na false , to to .plik css i jego zawartość nie będą renderowane.

Dlatego zaleca się użycie atrybutu media w znaczniku <link> ponieważ gwarantuje lepsze wrażenia użytkownika.

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

Niektóre narzędzia, które pomogą Ci zautomatyzować oddzielanie kodu css w różnych plikach zgodnie z media-querys

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

Używam go do wykonywania swojej pracy.

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

Zachowanie nie zmienia się na pulpicie. Ale na tabletach i komórkach rozszerzam pasek nawigacyjny, aby pokryć duży obraz logo. Uwaga: Użyj margines (góra i dół) tyle, ile potrzebujesz do wysokości logo.

W moim przypadku 60px góra i dół działały idealnie!

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

Sprawdź navbar tutaj .

Najlepsze rozwiązanie dla mnie, wykrywanie, czy urządzenie jest mobilne, czy nie:

@media (pointer:none), (pointer:coarse) {
}

Jest to tylko dla tych, którzy nie wykonali jeszcze projektu "mobile-first" na swoich stronach internetowych i szukają szybkiego tymczasowego rozwiązania.

Dla Telefonów Komórkowych

@media (max-width:480px){}

Do Tabletek

@media (max-width:960px){}

Do Laptopów / Desktopów

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

Do Laptopów Hi-Res

@media (max-width:1280px){}

$xs : "extra-small";
$s  : "small";
$m  : "medium";
$l  : "large";
$xl : "extra-large";

@mixin respond($breakpoint) {
  @if($breakpoint == $xs)  {
    @media only screen and (min-width: 320px) and (max-width: 479px) { @content; }
  }
  @if($breakpoint == $s)  {
    @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
  }
  @if($breakpoint == $m)  {
    @media only screen and (min-width: 768px) and (max-width: 991px) { @content; }
  }
  @if($breakpoint == $l)  {
    @media only screen and (min-width: 992px) and (max-width: 1199px) { @content; }
  }
  @if($breakpoint == $xl)  {
    @media only screen and (min-width: 1200px) { @content; }
  }
}

Możesz również dodać jeszcze jeden dla sceen mniejszy niż 320px jak Galaxy fold

@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

    }