w dzisiejszym świecie istnieje mnóstwo urządzeń do wyboru i może być zniechęcające, aby spróbować pomieścić i budować najlepsze doświadczenia na wszystkich urządzeniach. Jednak podczas projektowania stron internetowych i mobilnych ważne jest, aby być na bieżąco z najpopularniejszymi rozmiarami i rozdzielczością ekranu. Strona, która jest zoptymalizowana i responsywna, ułatwia przepływ użytkowników i ostatecznie sprawia, że jest to przyjemne doświadczenie dla odbiorców.,
Rozmiar ekranu, Rozdzielczość i widok: Co to wszystko oznacza?
Kiedy kupujesz urządzenie, często zobaczysz zarówno rozmiar ekranu, jak i rozdzielczość wymienione w specyfikacji. Ekran jest fizyczny pomiar przekątnej ekranu w calach. Nie należy tego mylić z rozdzielczością, która jest liczbą pikseli na ekranie często wyświetlanych jako szerokość przez wysokość (np. 1024×768). Ponieważ urządzenia o tym samym rozmiarze ekranu mogą mieć bardzo różne rozdzielczości, programiści używają viewportów podczas tworzenia przyjaznych dla urządzeń mobilnych stron., Porty widokowe to zmniejszone wersje rozdzielczości, które umożliwiają bardziej spójne oglądanie witryn na różnych urządzeniach. Wizjery są często bardziej znormalizowane i mniejsze niż rozmiary rozdzielczości.
podczas gdy wyświetlacze stacjonarne i laptopowe są w orientacji poziomej (szerszej niż wysoka), wiele urządzeń mobilnych można obracać, aby wyświetlać strony internetowe zarówno w orientacji poziomej, jak i pionowej (wyższej niż szeroka). Oznacza to, że projektanci i programiści muszą zaprojektować dla tych różnic.
potrzebujesz pomocy w ustaleniu, czy Twoja strona jest responsywna? Skorzystaj z naszego bezpłatnego narzędzia MG, Responsive Design Checker.,
podczas gdy wyświetlacze stacjonarne i laptopowe są w orientacji poziomej (szerszej niż wysoka), wiele urządzeń mobilnych można obracać, aby wyświetlać strony internetowe zarówno w orientacji poziomej, jak i pionowej (wyższej niż szeroka). Oznacza to, że projektanci i programiści muszą zaprojektować dla tych różnic.
styl responsywny
dla firm projektowanie dla każdego urządzenia byłoby prawie niemożliwe. Zamiast tego, podczas programowania responsywnych projektów programiści często:
- grupują stylizację w najbardziej typowe rozmiary urządzeń dla telefonów, tabletów i komputerów stacjonarnych., W tym przypadku wszystko większe niż 7 cali jest zwykle wyświetlane w rozdzielczości pulpitu lub-
- użyj punktów przerwania (zdefiniowanych szerokości pikseli, które Wyświetlacz dostosuje układ na podstawie rozmiaru ekranu) w zależności od projektu i układu
czasami programista może wybrać połączenie obu metod, jeśli uzna to za konieczne. Zalecamy zacząć od pogrupowania typowych rozmiarów urządzeń.
Jeśli jesteś programistą i chcesz wygenerować style niezbędne do obsługi stylów mobilnych lub responsywnych, poniżej zamieściliśmy fragment CSS, który może Ci pomóc.,d może być używany tylko jako przewodnik, aby rozpocząć:
/* start of desktop styles */
@media screen and (max-width: 991px) {
/* początek dużych stylów tabletu */
@media screen and (max-width: 767px) {
/* początek średnich stylów tabletu */
}
@Media screen and (max-width: 479px) {
/* start of phone styles */
}
most popular screen resolution
wiedząc, że jest to kluczowe dla wielu różnych urządzeń przy projektowaniu stron internetowych, zebraliśmy listę najbardziej aktualnych urządzeń z ich odpowiednimi rozmiarami pikseli i widokami poniżej., Umieściliśmy te informacje również w poręcznym pliku PDF do pobrania.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Podziel się z nami na Facebook!