Typowe punkty przerwania dla zapytań o media w witrynie responsywnej
Pracuję więc nad moją pierwszą responsywną stroną internetową, która szeroko wykorzystuje zapytania o media. Zastanawiałem się, czy są jakieś wspólne szerokości stron, które powinienem zoptymalizować.
Prawdopodobnie będę miał maksymalną szerokość (nie będzie pełny płyn) myślę, że będę miał może 3-5 ustawionych szerokości z zabawnymi małymi przejściami CSS3 między nimi (podobnie jak działa sztuczki CSS).
Obecnie liczby, których używam są nieco dowolne:
@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}
Również, myślę, że przeczytałem że niektóre urządzenia mobilne nie zachowują się zgodnie z oczekiwaniami (z @media). Gdzie to wchodzi w grę i jak mam sobie z tym poradzić?
4 answers
Decydując się na punkty przerwania dla zapytań o media, rozważ te realia:
- Istnieją setki różnych rozmiarów ekranów na tysiącach różnych urządzeń.
- przyszłość przyniesie nowe rozmiary ekranu. Apple, Samsung, Microsoft, LG, Nokia i każdy inny producent urządzeń może w każdej chwili zmienić rozmiar ekranu swoich popularnych modeli.
Przy tak wielu możliwościach viewportu, dopasowanie punktów przerwania do konkretnych urządzeń nie brzmi jak skuteczna strategia. Nadążanie za tym, co jest popularne, co nowe i co się zmieniło, będzie niekończącym się zadaniem.
Lepszym rozwiązaniem może być ustawienie punktów przerwania na podstawie zawartości i układu.
Dzięki takiemu podejściu witryna wykorzystuje swoje naturalne punkty przerwania, aby dostosować się do wszystkich rozmiarów widoku, zamiast sztucznych punktów przerwania ukierunkowanych na obecnie popularne rozmiary ekranu.
Ta metoda jest tak prosta i łatwa, że może być trudno believe:
- Uruchom swoją stronę na komputerze stacjonarnym lub laptopie.
- gdy zawęzisz okno przeglądarki, zwróć uwagę, jak reaguje strona internetowa.
- kiedy osiągniesz punkt, w którym układ nie jest już idealny, będzie to twój pierwszy punkt przerwania.
- Dostosuj witrynę do tego rozmiaru ekranu(który może nie mieć związku z żadnym urządzeniem).
- zawężaj okno przeglądarki.
- Kiedy pojawi się następny problem z układem, będzie to twój drugi punkt przerwania.
- ... i tak dalej i tak dalej.
Oczywiście, jeśli projektujesz urządzenia mobilne-najpierw, proces idzie w odwrotną stronę: zacznij od wąskiego ekranu i wypracuj wyjście.
Z naturalnymi punktami przerwania nie musisz już skupiać się na gigantycznym wszechświecie o rozmiarach widoków, ponieważ Twoja witryna dostosuje się do każdego urządzenia, zarówno teraz, jak i w przyszłości.
Według jednego z programistów , takie podejście wprowadza punkty przerwania w pełnym kręgu do ich pierwotnej intencji:
Nie jestem pewnie, jak kiedyś wpadliśmy na frazę " specyficzne dla urządzeń breakpoints".. Jak to zrozumiałem, termin " breakpoint" zawsze było odniesienie do miejsca, w którym treść lub układ " pęknie" (tj. wydają się wadliwe) i dlatego trzeba by zastosować Zapytanie o media w o to chodzi. Ale to chyba tylko semantyka, zawsze myślałem zdrowym rozsądkiem było odwoływanie się do punktów przerwania w kontekście treści albo układ.
~ Louis Lazaris, ImpressiveWebs
Więcej informacji (Strony zewnętrzne):
- dlaczego nie potrzebujesz punktów przerwania specyficznych dla urządzenia
- ustawianie punktów przerwania w projekcie responsywnym
- programiści Google: jak wybrać punkty przerwania
- Złotowłosa Podejście do projektowania responsywnego
- Wszystkie urządzenia są w pełni kompatybilne ze standardem viewport.]}
- Pliki multimedialne dla standardowych urządzeń (lista zapytań dotyczących popularnych urządzeń)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-18 14:25:32
- jest to bardzo przydatny przewodnik dla rozmiarów ekranów mobilnych.
- świetny przewodnik po statystykach rozdzielczości ekranu
- DANE Google Analytics dotyczące rozdzielczości mogą być również cenne, jeśli masz do nich dostęp.
Również zdecydowanie polecam użycie device-width dla rozmiarów urządzeń mobilnych, chyba że chcesz, aby użytkownicy widzieli Twoje style mobilne, gdy zmieniają rozmiar okna przeglądarki na urządzeniu nie-mobilnym. width jest szerokością widoku, a {[0] } jest aktualna rozdzielczość urządzenia.
Masz rację. Wiele urządzeń nie dajeRównież, myślę, że czytałem, że niektóre urządzenia mobilne nie zachowują się zgodnie z oczekiwaniami (z @media).
width lub device-width, których oczekujesz, zwłaszcza podczas przełączania między poziomym a pionowym (często dają szerokość poziomą w pionie). Automatyczne powiększanie urządzenia może również rzucić klucz do rzeczy. Używanie znacznika metaviewport może pomóc w wielu z nich problemy. (więcej informacji tutaj)Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-19 17:31:31
Tego właśnie używam...
@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}
Tam są wszystkie rodzaje innych, odpowiednio (min-width bez max-width lub max-width bez min-width), ale to jest moja podstawowa konfiguracja.
Osobiście nigdy nie rozumiałem dziwnych szerokości, których używa wielu ludzi. Na przykład, 320 i więcej ma pięć przyrostów zapytań o Media CSS3: 480, 600, 768, 992 i 1382px. To nie ma dla mnie żadnego sensu. Przerwy logiczne są w odstępach 320px (320, 640, 960, 1280, 1600, 1920). Zauważ, że te przerwy mogą dać nieco inny układ dla prawie każdego urządzenia w obu orientacji (omnia jest 240x400, iphone jest 320x480, droid X jest 480x858, iPad jest 768x1024, galaxy S3 jest 720x1280, a oni mówią 1920x1080 tabletek).JJ
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-30 16:17:11
Kilka uchwał do szukania:
Ekran Iphone ' a (wiele innych smartfonów ma podobne rozmiary ekranu: Rozdzielczość 960 na 640 pikseli przy 326 ppi http://www.apple.com/iphone/specs.html
Ekran iPada (wiele innych tabletów ma podobne rozmiary ekranu Rozdzielczość 1024 na 768 pikseli przy 132 pikselach na cal (ppi) http://www.apple.com/ipad/specs/
'normalny' ekran wiele normalnych ekranów ma również rozdzielczość 1024 na 768 pikseli, zgodnie z: http://www.w3schools.com/browsers/browsers_display.asp ale nie ręczę za ich zaufanie.
Szukam teraz więcej danych.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-19 17:17:57