Jak dostosować stronę do różnych rozdzielczości ekranu

Zadaj pytanie

Webmasterzy mogą stworzyć strony, które będą dostępne i prawidłowo wyświetlane, niezależnie od rozdzielczości ekranu. Można ją ustawić za pomocą atrybutu width (szerokość).

W tej poradzie przedstawiamy sposób na dostosowanie rozmiaru strony do różnych rozdzielczości ekranu.

Jak dostosować rozmiar strony do wszystkich rozdzielczości

Aby dostosować rozmiar strony internetowej do każdej rozdzielczości ekranu, należy odpowiednio dostosować szerokość strony.


Najczęściej używanym sposobem jest skorzystanie z tagu “body”. Możesz to zrobić korzystać z funkcji div # body lub innej.

Aby dostosować rozmiar strony, skorzystaj z kodu CSS: body { width: 100%; }


Kod ten umożliwi wyświetlenie 100% rozmiaru strony, niezależnie od jej rozmiaru. Oczywiście, możesz ustawić dowolną szerokość, na przykład 90% lub 80%. Jeśli ustalisz mniejszą szerokość, możesz skorzystać z opcji "margin: auto".

Ważne: Musisz zdefiniować szerokość w procentach, ponieważ tym sposobem zostanie policzona wartość relatywna do szerokości okna, w przeciwieństwie do automatycznie ustalonych miar.

Możesz ustalić minimalną i maksymalną szerokość strony. Musisz jednak pamiętać o paru rzeczach.

Minimalna szerokość nie jest wspierana w przeglądarce Internet Explorer. Z kolei maksymalna szerokość może sprawić, że strona będzie wyglądała dziwacznie na szerszych ekranach, ponieważ nie zapełni całego ekranu.

Przykład: Strona ustawiona na 90%, wyśrodkowana, z minimalną szerokością 600 pikseli i maksymalną 2000 pikseli: body{width:90%;margin:auto;min-width:600px;max-width:2000px}

Zdjęcie: © Rashad Ashurov - Shutterstock.com.
Jean-François Pillou

Jean-François Pillou - Founder of CCM
W zespole znany jako Jeff. Jean-François Pillou jest założycielem serwisu CommentCaMarche.net. Jeff pełni też rolę CEO w CCM Benchmark oraz Digital Director w Figaro Group.

Dowiedz się więcej o zespole CCM