Aby stworzyć responsywną stronę internetową w HTML, należy zadbać o to, by wyświetlała się poprawnie na różnych urządzeniach – od smartfonów, przez tablety, aż po komputery stacjonarne. Responsywność polega na dynamicznym dopasowywaniu układu, rozmiarów i elementów strony do szerokości ekranu użytkownika. Osiąga się to głównie dzięki połączeniu HTML, CSS oraz tzw. zapytań medialnych (media queries).
Kluczowe elementy strony responsywnej
Znacznik meta viewport
Na początku w <head> sekcji każdej responsywnej strony należy dodać meta-tagę viewport, dzięki której przeglądarka wyświetli stronę w poprawnej skali na urządzeniach mobilnych:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Struktura HTML
Tworząc prostą strukturę responsywnej strony, można skorzystać z HTML5, dzieląc treść na logiczne sekcje:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsywna Strona</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Moja responsywna strona</h1>
</header>
<nav>
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">O nas</a></li>
<li><a href="#">Usługi</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<main class="grid-container">
<section class="grid-item">Treść 1</section>
<section class="grid-item">Treść 2</section>
<section class="grid-item">Treść 3</section>
</main>
<footer> © 2025 Moja Strona </footer>
</body>
</html>
Podstawy stylowania (CSS)
Styl ogólny
Przykładowy arkusz CSS dla responsywności:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, nav, main, footer {
padding: 16px;
box-sizing: border-box;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
nav li {
margin-right: 20px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
}
.grid-item {
background: #e0e0e0;
padding: 20px;
border-radius: 8px;
text-align: center;
}
Zapytania mediowe (media queries)
Zapytania mediowe pozwalają dopasować układ do różnych rozdzielczości:
@media (max-width: 900px) {
.grid-container {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
nav ul {
flex-direction: column;
}
.grid-container {
grid-template-columns: 1fr;
}
}
Dzięki temu:
- na dużych ekranach pojawią się trzy kolumny,
- na tabletach (do 900px) układ zmieni się na dwie kolumny,
- na smartfonach (do 600px) układ przejdzie w jedną kolumnę, a menu nawigacyjne ułoży się pionowo.
Praktyczne przykłady zastosowań
Przykład 1 – responsywny layout siatki (grid)
Przy użyciu CSS Grid można łatwo tworzyć elastyczne siatki:
<main class="grid-container">
<section class="grid-item">Treść 1</section>
<section class="grid-item">Treść 2</section>
<section class="grid-item">Treść 3</section>
</main>
Układ ten dopasuje się do rozmiaru ekranu (trzy, dwie lub jedna kolumna).
Przykład 2 – responsywne menu nawigacyjne
Proste menu, które na szerokich ekranach wyświetla się poziomo, a na węższych pionowo:
nav ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 600px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav li {
margin: 10px 0;
}
}
Przykład 3 – obrazy responsywne
Obrazy także powinny być elastyczne:
img {
max-width: 100%;
height: auto;
display: block;
}
Dodatkowe wskazówki
- Testowanie responsywności – skorzystaj z narzędzi deweloperskich w przeglądarce (zwykle F12 → tryb urządzenia mobilnego);
- Nie używaj stałych szerokości w pikselach – staraj się korzystać z wartości procentowych, rem lub fr (w Gridzie), aby umożliwić płynne skalowanie;
- Uprość układ na mniejszych ekranach – rozważ np. ukrywanie drugorzędnych elementów lub przekształcenie menu w hamburgera.
Rozbudowany przykład kodu
Poniżej kompletny szablon responsywnej strony:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład strony responsywnej</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
header, footer {
background: #282c34;
color: #fff;
text-align: center;
padding: 16px;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
background: #424652;
}
nav li {
margin: 0 16px;
}
nav a {
color: white;
text-decoration: none;
padding: 8px 12px;
display: block;
}
main {
padding: 24px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background: #f4f4f4;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px #ccc;
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
@media (max-width: 900px) {
.grid-container {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav li {
margin: 10px 0;
}
.grid-container {
grid-template-columns: 1fr;
}
main {
padding: 8px;
}
}
</style>
</head>
<body>
<header>
<h1>Responsywna Strona Internetowa</h1>
</header>
<nav>
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">O nas</a></li>
<li><a href="#">Realizacje</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<main>
<div class="grid-container">
<div class="grid-item">
<h2>Projekt 1</h2>
<img src="https://placehold.co/300x200" alt="Przykładowy obraz">
<p>Opis projektu.</p>
</div>
<div class="grid-item">
<h2>Projekt 2</h2>
<img src="https://placehold.co/300x200" alt="Przykładowy obraz">
<p>Opis projektu.</p>
</div>
<div class="grid-item">
<h2>Projekt 3</h2>
<img src="https://placehold.co/300x200" alt="Przykładowy obraz">
<p>Opis projektu.</p>
</div>
</div>
</main>
<footer>
© 2025 Responsywna Strona
</footer>
</body>
</html>
Dzięki powyższym technikom stworzysz stronę internetową, która będzie wygodna i czytelna na każdym urządzeniu. To nie tylko poprawia doświadczenie użytkownika, ale także pozytywnie wpływa na pozycjonowanie w wyszukiwarkach oraz spełnia nowoczesne standardy projektowania webowego.
