Których media queries powinniśmy używać?

Question

Witam.

Szukam ostatnio w internecie odpowiedzi na powyższe pytanie. Mam na myśli proste - stereotypowe strony internetowe(sticky nav u góry, content,footer).  Widzę, że na popularnych forach i różnych artykułach zdania są podzielone.

Najpopularniejsze poglądy to, żeby używać następujących media queries.
 

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

Inni uważają, że wystarczy za bootstrapem v2.0: 

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

 

Inni natomiast, że wystarczy używać 3ch queries zgodnie z jego (bootstrapa) trzecią wersją:

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

A wy co o tym sądzicie? Jakich media queries używacie dla swoich projektów?

Comments

stereotypowe strony internetowe? WTF???!

Answer 1

Takich, jak trzeba. Nie dostosowuję layoutu do magicznych rozdzielczości tylko robię płynny i używam media queries do tworzenia faktycznych breakpointów, gdy coś nie pasuje. Z tego powodu lista breakpointów zależy od projektu.

Answer 2

Powiem szczerzę, że sam się nie raz nad tym zastanawiałem i wydaję mi się, że nie ma co się przyklejać do jednej wersji, tylko adaptować w zależności od złożoności strony.
 

Jeśli przykładowo mamy stronę która nie posiada skomplikowanego layoutu, duży header, nav bar, jakiś aside,reklamy i main content. To taką stronę w bardzo łatwy sposób możemy dostosować do wygodnego użytkowania dla wielu rozmiarów ekranów, jedynie poprzez zmienianie rozmiarów ich pojemników.

Natomiast jeśli strona jest bardziej skomplikowana, pojawiają się jakieś animacje, coś lata coś się gdzieś pojawia. Odpowiednie modelowanie tego, dla różnych ekranu jest bardzo czasochłonne w moim mniemaniu. Oczywiście wszystko zależy od, czasu jaki masz, Twoich chęci, ewentualnych założeń projektowych, bo może być tak, że celujemy w fanów apple, więc dostosujemy dla każdego Idevic'a.

Mimo wszystko jak dla mnie ograniczanie się do 3,4 rozmiarów jest w porządku i pozwala całkiem precyzyjnie przygotować stronę pod różnorakie urządzenia. Zresztą myślę, że popularność Boots'trapa w pewien sposób to potwierdza, a jeśli chciałbyś być najmilszą osobą na świecie to trzymaj linka i dobrej zabawy ^^

Comments

Podpisuje sie rowniez pod tym, a z przykładów korzystam z ostatniej opcji. Robiąc mobile first w trakcie powiększania dostosowujesz elementy i tyle.

---

Zgadzam się mobile-first, jest dużo wygodniejszy niżeli upychanie wszystkiego do 500px.

Answer 3

Używam takich media queries jakie mi są potrzebne, to proste. Też kiedyś się nad tym zastanawiałem aczkolwiek im człowiek bardziej kombinuje tym gorzej jest zabrać się za jakiś projekt. Przeważnie wykorzystuje podobne do tych z bootstrapa V2 bo są odpowiednie co do potrzeb aczkolwiek często piszę niestandardowe media queries żeby wszystko ładnie działało.

Jeśli chcesz zmienić od jakiejś rozdzielczości (lub do jakiejś) element to pisz swoje.