Dostosuj swoją witrynę, aby pasowała do wszystkich rozwiązań

Podczas projektowania strony internetowej jedną z najważniejszych rzeczy, o których należy pamiętać, jest upewnienie się, że strona jest poprawnie wyświetlana na ekranach i urządzeniach wszystkich rozmiarów. Można to zrobić, wstawiając linię kodu na stronę, która definiuje względną szerokość strony lub podając minimalne i maksymalne wartości rozdzielczości.

Ten szybki artykuł zawiera wskazówki, jak zapewnić, że witryna będzie poprawnie wyświetlana na ekranach wszystkich rozmiarów .

Dostosuj swoją stronę, aby pasowała do wszystkich ekranów

Zdefiniowanie względnej szerokości strony jest zalecaną metodą projektowania stron internetowych ze względu na możliwość dostosowania strony do ekranów o dowolnej wielkości. Określając szerokość w procentach, a nie liczbę jednostek, tworzysz pewną elastyczność dla każdego elementu strony, co pozwala mu rosnąć lub zmniejszać się w oparciu o specyfikacje ekranu widza.

Definicja względnej szerokości witryny odbywa się za pomocą znaczników treści . Ten tag można dostosować, jeśli używasz ciała div # :

 body {szerokość: 100%;} 

W tym przykładzie kod nakazuje, aby strona Twojej witryny zajmowała 100% okna, bez względu na rozmiar ekranu wyświetlania. Jeśli chcesz, aby Twoja strona wyglądała na nieco mniejszą, zalecamy ustawienie szerokości na nie mniej niż 80% lub ryzykujesz, że zawartość będzie zbyt mała na ekranie. Jeśli zdefiniujesz mniejszą szerokość, możesz ustawić ostrość ekranu za pomocą marginesu: auto .

Minimalna lub maksymalna szerokość nieruchomości

Właściwość minimalnej lub maksymalnej szerokości może być również używana podczas dostosowywania strony internetowej do wszystkich typów rozdzielczości. Należy jednak pamiętać, że minimalna szerokość nie jest obsługiwana w programie Internet Explorer, a ustawienie maksymalnej szerokości może spowodować zniekształcenie prezentacji, jeśli mniejsza strona nie pasuje do większego ekranu.

Oto przykład strony internetowej pokazującej szerokość strony 90%, wyśrodkowany, o minimalnej szerokości 600 pikseli i maksymalnej szerokości 2000 pikseli:

 body {width: 90%; margin: auto; min-width: 600px; max-width: 2000px}