Responsywny układ strony to taki, który zmienia swoje atrybuty zdefiniowane za pomocą stylów CSS w zależności od różnych czynników.
Najczęstszym czynnikiem jest szerokość strony przeglądarki.
Zadziałąją one, gdy dokument HTML zostanie wyświetlony w oknie przeglądarki o określonej szerokości (komputer, tablet, telefon).

Responsywny projekt strony pozwala za pomocą kodu HTML i stylów CSS zmienić rozmiar zawartości, przesunąć określoną zawartość lub ukryć ją, tak aby strona dobrze wyglądała na dowolnym urządzeniu.

W HTML5 za pomocą znacznika <meta> możliwe jest dołączenie metatagu viewport i przejęcie kontroli nad widocznym dla użytkownika obszarem wyświetlania strony.
Do strony należy dołączyć następujący zapis:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Spowoduje on poprawne wyświetlanie strony na urządzeniach mobilnych.

Zdefiniowany w znaczniku <meta> element "viewport" udostępnia przeglądarcepolecenia dotyczące kontrolowania wymiarów strony i skalowania.

Składnia width=device-width określa szerokość strony, która powinna odpowiadać szerokości ekranu urządzenia, gdzie będzie wyświetlana.

Część initial-scale=1.0 ustawia początkowy poziom powiększenia w momencie, gdy strona jest otwierana przez przeglądarkę.

Poprawne obliczanie wymiarów obiektów uzyskamy stosując, na początku skryptu css reguły:

Dodając regułę @media, spowodujemy włączenie określonych atrybutów CSS tylko wtedy, gdy spełnione zostaną wymagane warunki.
Stosujemy właściwość min-width lub max-width.

Strona, która będzie wyświetlana na urządzeniach mobilnych, powinna być zbudowana na bazie jednej kolumny.
Zapewni to poprawne skalowanie strony i dopasowanie szerokości kolumny do ekranu urządzenia wyświetlającego.

Przykład:

HTML

<div style="overflow:auto">
	<div class="left">
		<h2>Lewa</h2>
	</div>

	<div class="main">
		<h2>Strona główna</h2>
	</div>

	<div class="right">
		<h2>Prawa</h2>
	</div>
</div>

CSS

		
.left {
	float:left;
	width:20%;
}

.main {
	float:left;
	width:60%;
}

.right {
	float:left;
	width:20%;
}

@media only screen and (max-width:768px) {
	.left, .main, .right {
		width:100%;
	}
}

przykład zmiany układu strony

Złożone projekty powinny zawierać kilka punktów przerwania dla ekranów:

• bardzo małych - szerokość ekranu < 576px
• małych (telefon) - szerokość ekranu >= 576px
• średnich (tablet) - szerokość ekranu >= 768px
• dużych (laptop) - szerokość ekranu >= 992px
• bardzo dużych (komputery stacjonarne) - szerokość ekranu >= 1200px

obrazki

Jeżeli na responsywnej stronie występują obrazki, powinny być automatycznie skalowane wraz z szerokością strony.
Szerokość obrazków i innych grafik powinna być podawana w wartościach procentowych. Gdy nie jest to możliwe, należy taki element umieścić w kontenarze i jemu nadać wartości procentowe.

W przypadku gdy na stronie pojawiają się złożone elementy graficzne, które w wyniku skalowania stają się niewyraźne, jedynym rozwiązaniem jest ich ukrywanie i zastępowanie mniejszymi odpowiednikami.

element <picture>

Zastosowanie znacznika <picture> do wyświetlania obrazków pozwala na większą elastyczność i wybór z dostępnych obrazków tego, który najlepiej zaprezentuje się na stronie.
Zamiast jednego obrazka, który jest skalowany w zależności od sposobu jego wyświetlania na stronie, można użyć wielu obrazków. Ten, który najlepiej odpowiada parametrom ekranu, zostanie wyświetlony.

W elemencie <picture> występują dwa rodzaje znaczników: <source> i <img>.

Znacznik <source> posiada następujące atrybuty:

• srcset - określa URL obrazka do wyświetlenia (wymagany);
• media - definiuje zapytanie o media, które są definiowane w regule CSS @media;
• sizes - określa szerokość (width), występuje w zaptyaniu o media i określa ograniczenia narzucone na szerokość ekranu;
• type - określa typ danych;

Przykład:

<picture>
	<source srcset="obrazek1.jpg" media="(max-width: 600px)">
	<source srcset="obrazek2.jpg">
	<img src="obrazek2.jpg" alt="obrazek">
</picture>

Przeglądarka wybierze pierwszy obrazek z listy elementów (<source>), który pasuje do zdefiniowanego zapytania o media, i go wyświetli.

Znacznik <img> jest wymagany jako ostatni element w bloku deklaracji <picture>. Służy również do osiągnięcia kompatybilności wstecznej i pozwala na wyświetlenie obrazka w przeglądarkach, które nie obsługują elementu <picture>.

przykład zmiany obrazka

tabele

Dla tabel wyświetlanych na responsywnej stronie można zdefiniować pasek przewijania, który zostanie wyświetlony, gdy szerokość ekranu będzie zbyt mała, aby wyświetlić całą zawartość tabeli.
Żeby uzyskać podany efekt, tabelę należy umieścić w kontenerze (np. blok <div>) i nadać mu atrybut overflow-x: auto.

przykład przewijanej tabeli

tekst

Wielkość tekstu może być ustalana przy zastosowaniu jednostki "vw", odnoszącej się do szerokości strony.
Jeśli szerokość okna wynosi np. 1200px i wprowadzimy:

<h1 style="font-size:10vw">napis na stronie</h1>
Wysokość tekstu wyniesie 120px.

Zmiana szerokości strony spowoduje zmianę wielkości tekstu.

przykład zmiany wielkości tekstu