320, 768 i 1024. Czy te liczby oznaczają coś dla ciebie?
Nie, to nie jest kod Da Vinci, to szerokość w pikselach, którą wielu projektantów kojarzy z szerokościami ekranu na urządzenia przenośne, tablety i komputery.
Problem z tym, że mój telefon nie ma 320 pikseli szerokości, mój tablet nie ma szerokości 768 pikseli, a mój ekran nie ma na pewno szerokości 1024 pikseli. Istnieją setki różnych rozmiarów ekranu na wielu różnych urządzeniach, a mimo to wciąż myślimy o elastycznym projekcie internetowym w postaci 320, 768 i 1024.
Widziałem wiele stron, które wykorzystują te trzy punkty przerwania dla swoich projektów i po prostu tworzą 3 statyczne układy, które wyśrodkują na najbliższej szerokości.
Jest to lepsze niż posiadanie starej, statycznej witryny tylko dla komputerów stacjonarnych, ponieważ obsługują one co najmniej jedną kolumnę, uproszczoną wersję dla urządzeń mobilnych i wersję przyjazną dla tabletu, ale dlaczego miałbyś zrazić wszystkie inne rozmiary ekranu, nie biorąc ich pod uwagę? wynagrodzenie?
Czy projekt będzie nadal działał w innych rozmiarach, ale co się stanie, gdy masz tablet mniejszy niż 768? Dostaną mobilne wrażenia na tablecie! A kiedy oglądasz go na ekranie laptopa mniejszym niż 1024? Po prostu wyślemy im układ tabletu i będziemy się z nich śmiać, bo nie mamy jednego z trzech rozmiarów ekranu, które uznaliśmy za godne.
Tworząc elastyczne układy, zawsze należy dążyć do ustawienia jak największej liczby wymiarów w procentach. Pomaga to zagwarantować, że zawartość będzie się powiększać i zmniejszać równomiernie na różnych rozmiarach ekranu i będzie to robić proporcjonalnie do urządzenia, na którym jest wyświetlana. Takie podejście zapewni również, że zawartość będzie zawsze wypełniać 90% (lub tyle, ile określasz) ekranu, zamiast prawdopodobnie 50% ekranu, ponieważ zawartość jest wyśrodkowana na ekranie o kilka pikseli mniejszym niż następny dostępny punkt przerwania.
Wybierając punkty przerwania, zawsze powinieneś podejmować decyzje w oparciu o to, gdzie podziała się zawartość, a nie na szerokość ekranu urządzenia. Zamiast tworzyć projekt, a następnie modyfikować go tak, aby pasował do ekranu iPada, powinieneś dowiedzieć się, na jakiej szerokości zaczyna się walić treść.
Mam tendencję do rozpoczynania od szerokości 1400 i powoli zmniejszam przeglądarkę do momentu, gdy fragment treści przerwie układ lub zbliży się do tego. To następnie określa mój następny punkt przerwania. Nie ma znaczenia, czy to 1200, 800 czy 673, jeśli treść nadal działa, to po co zmieniać układ?
Przekonasz się, że skończysz z dziwnymi punktami przerwania, takimi jak 477 lub 982 i że możesz mieć 2, 6 lub 10 różnych punktów przerwania. Chodzi o to, że decydują raczej treści, niż zamierzone rozmiary ekranu, na których chcesz je wyświetlać.
Ponieważ każdego miesiąca wydawane są różne urządzenia i ekrany, niemożliwe jest określenie zestawu konkretnych punktów przerwania dla naszych responsywnych projektów. Prawda jest taka, że podczas gdy używamy zmiennej, takiej jak szerokość ekranu, w celu określenia naszych responsywnych układów, będziemy mieć problemy z zapewnieniem idealnego układu dla każdego innego rozmiaru, ale postępując zgodnie z kilkoma wskazówkami powyżej, możemy przynajmniej zapewnić, że zawartość jest zawsze wyświetlany najlepiej jak to możliwe.
Z jakich punktów przerwania zazwyczaj korzystasz? Czy w ogóle unikasz pułapek? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz o szerokim obciążeniu przez Shutterstock.