Menu

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

Ostatnia aktualizacja: przez Макс Вега .

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: © Tomas Yates - Unsplash.com.

Treści, które ukazują się w serwisie CCM powstają we współpracy z ekspertami IT i pod kierownictwem Jeana-François Pillou, założyciela CCM.net. CCM to serwis o nowych technologiach - jeden z największych na świecie, dostępny w 11 językach.
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.