CZYM JEST RESPONSYWNE PROJEKTOWANIE STRON INTERNETOWYCH?

Responsywne projektowanie stron internetowych sprawi, że Twoja strona będzie dobrze wyglądać na wszystkich urządzeniach.

Responsywne projektowanie stron internetowych wykorzystuje wyłącznie HTML i CSS.

Responsywne projektowanie stron internetowych nie jest programem ani JavaScriptem.

CO TO JEST RZUTNIA?

Widoczny obszar to widoczny dla użytkownika obszar strony internetowej.

Widoczny obszar różni się w zależności od urządzenia i będzie mniejszy na telefonie komórkowym niż na ekranie komputera.

Przed tabletami i telefonami komórkowymi strony internetowe były projektowane wyłącznie na ekrany komputerów i często zdarzało się, że strony internetowe miały statyczny wygląd i stały rozmiar.

Potem, gdy zaczęliśmy surfować po Internecie za pomocą tabletów i telefonów komórkowych, strony internetowe o stałym rozmiarze były zbyt duże, aby zmieścić się w widocznym obszarze. Aby to naprawić, przeglądarki na tych urządzeniach przeskalowały całą stronę internetową, aby dopasować ją do ekranu.

USTAWIENIE RZUTNI

HTML5 wprowadził metodę pozwalającą projektantom stron internetowych przejąć kontrolę nad widocznym obszarem za pomocą <meta> tagu.

Powinieneś dołączyć następujący <meta> element widoku na wszystkich swoich stronach internetowych:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Daje to przeglądarce instrukcje dotyczące kontrolowania wymiarów i skalowania strony.

Część width=device-width ustawia szerokość strony zgodnie z szerokością ekranu urządzenia (która będzie się różnić w zależności od urządzenia).

Część initial-scale=1.0 ustawia początkowy poziom powiększenia, gdy strona jest ładowana po raz pierwszy przez przeglądarkę.

ROZMIAR ZAWARTOŚCI DO RZUTNI

Użytkownicy są przyzwyczajeni do przewijania witryn w pionie zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych - ale nie w poziomie!

Tak więc, jeśli użytkownik jest zmuszony do przewijania w poziomie lub pomniejszania, aby zobaczyć całą stronę internetową, powoduje to słabe wrażenia użytkownika.

Kilka dodatkowych zasad, których należy przestrzegać:

1. NIE używaj dużych elementów o stałej szerokości — na przykład, jeśli obraz jest wyświetlany na szerokości szerszej niż rzutnia, może to spowodować przewijanie rzutni w poziomie. Pamiętaj, aby dostosować tę zawartość do szerokości widocznego obszaru.


2. NIE pozwól, aby treść była dobrze renderowana na określonej szerokości widocznego obszaru — ponieważ wymiary ekranu i szerokość w pikselach CSS różnią się znacznie między urządzeniami, treść nie powinna polegać na określonej szerokości widocznego obszaru, aby była dobrze renderowana.


3. Użyj zapytań o media CSS, aby zastosować różne style dla małych i dużych ekranów — ustawienie dużych bezwzględnych szerokości CSS dla elementów strony spowoduje, że element będzie zbyt szeroki dla widocznego obszaru na mniejszym urządzeniu. Zamiast tego rozważ użycie względnych wartości szerokości, takich jak szerokość: 100%. Należy również uważać na używanie dużych bezwzględnych wartości pozycjonowania. Może to spowodować, że element wypadnie poza widoczny obszar na małych urządzeniach.