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

Listopad 2016

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ść).

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}


Zobacz również :
Ten dokument zatytułowany «  Jak dostosować stronę do różnych rozdzielczości ekranu  » opublikowany przez CCM (pl.ccm.net) jest udostępniany na licencji Creative Commons. Możesz kopiowaći modyfikować kopie tej strony, na warunkach określonych przez licencjęi wymienionych w niniejszym tekście.