Jakie są najważniejsze zapytania dotyczące mediów, które można wykorzystać przy tworzeniu elastycznego, responsywnego projektu?

Question

Istnieje wiele różnych zapytań o media dla ekranów mobilnych. Korzystanie z elastycznej strony mobilnej może być przytłaczające. Jakie są najważniejsze z nich podczas projektowania na urządzenia mobilne? Znalazłem ten artykuł, który przedstawia całkiem dobrą pracę z przedstawieniem dostępnych zapytań o media: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

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

/* 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 (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

Answer 1

Polecam biorąc po Twitter's Bootstrap z zaledwie czterech zapytań mediów:

/* Landscape phones and down */ 
@media (max-width: 480px) { ... } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* Large desktop */ 
@media (min-width: 1200px) { ... } 

Edit: Oryginalny odpowiedzi (powyżej) została podjęta z Bootstrap wersji 2. Bootstrap od tego czasu zmieniła swoje pytania mediów w wersji 3. Zauważ, że nie ma jawnego zapytania dla urządzeń mniejszych niż 768px. Ta praktyka jest czasami nazywana mobilną. Wszystko poza zapytaniem o media jest stosowane do wszystkich urządzeń. Wszystko wewnątrz bloku zapytań o media rozciąga się i zastępuje to, co jest dostępne globalnie, a także style dla wszystkich mniejszych urządzeń. Pomyśl o tym, jako o progresywnym ulepszeniu responsywnego projektu.

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { ... } 

Sprawdź na Bootstrap 3's docs.

Answer 2

1. Design w procentach i początkowo zoptymalizowany dla ekranu 15" +

2. Przegląd jakie elementy chcesz zobaczyć na telefon. - po prostu zachować istotną treść i usunąć elementy, które nie działają lub bałaganu Te style mogą być zawarte w @media (maksymalna szerokość: 480px) {...}

3. Gdy rzeczy zmienią się na 10 "lub mniej, przeprojektuj przyciski i komponenty interaktywne dla palców zamiast myszy. @media (maksymalna szerokość: 767px) {...}

4. Zmniejsz szerokość przeglądarki. Gdy rzeczy nie wyglądają tak dobrze, wejdź do konsoli i dowiedz się, jakie style można zmienić, lub przedmiotów, które należy przeprojektować lub usunąć. Zaznacz, w jakiej szerokości ekranu występują, i utwórz zapytanie o media.

5. Na koniec przejrzyj zapytania o media, aby sprawdzić, czy niektóre z nich można pogrupować (np. Jeśli masz szerokość 750 i 767 pikseli, możesz równie dobrze złączyć je w 767).

Jeśli są wygodne w jQuery można dodać

$(window).resize(function(){ 
    console.log($(window).width()); 
}); 

aby uzyskać bieżący rozmiar ekranu. Dodaj kilka dodatkowych pikseli dla dokładnego pomiaru.

Answer 3

Pierwszy kod Bootstrap, do którego odnosi się @cjlarose, zakłada utworzenie głównego arkusza CSS dla wyświetlacza o szerokości od 980px do 1200px, więc zasadniczo zaczynasz od projektowania pulpitu i adaptacji wszystkich pozostałych z poziomu to.

Cieszę się, że Twitter zmienił się na "mobile first" w Bootstrap 3. Jest to jedno z najpopularniejszych podejść do zapytań o media i sposób, w jaki wolę to robić. Zaczynasz od najmniejszego rozmiaru, a nie od biurka.

Należy pamiętać, że dana witryna może wymagać innych zapytań niż podane na niej lub na jakiejkolwiek innej liście.Powinieneś dodawać zapytania jako żądania, a nie na podstawie jakiegokolwiek szablonu.

Oto niektóre zapytania dotyczące multimediów, które okazały się najbardziej przydatne. Są to tylko niektóre przykłady:

/* Start with baseline CSS, for the smallest browsers. 
    Sometimes I put this into a separate css file and load it first. 
    These are the "mobile first" styles. */ 

... 


/* Then progressively add bigger sizes from small to large */ 

/* Smartphones start somewhere around here */ 
@media (min-width: 300px) { 
} 

/* You might do landscape phones here if your content seems to need it */ 
@media (min-width: 450px) { 
} 

/* Starting into tablets somewhere in here */ 
@media (min-width: 600px) { 
} 

/* Perhaps bigger tablets */ 
@media (min-width: 750px) { 
} 

/* Desktop screen or landscape tablet */ 
@media (min-width: 900px) { 
} 

/* A bit bigger if you need some adjustments around here */ 
@media (min-width: 1100px) { 
} 

/* Widescreens */ 
@media (min-width: 1500px) { 
} 

Najważniejszą rzeczą jest to, że może nie trzeba wszystkich z nich, lub może chcesz zmienić numery w zależności od treści wygląda. Nie sądzę, że istnieją naprawdę twarde reguły dotyczące tego, ile i gdzie umieścić punkty przerwania. Robię teraz witrynę, która wymaga tylko jednego punktu przerwania, ponieważ zawartość jest dość prosta, ale zrobiłem też strony, które wyglądają bardziej jak powyższy kod.

Nie dodałem kodu wyświetlacza siatkówki. Jest to przydatne, jeśli przełączasz obrazy o normalnej rozdzielczości dla obrazów o wysokiej rozdzielczości na ekranach o wysokiej rozdzielczości, ale w przeciwnym razie nie jest to zbyt użyteczne.