Responsywne kontenery i fluid layout

Wyobraź sobie, że budujesz świątynię w Starożytnym Egipcie. Mury świątyni muszą pomieścić wszystkie hieroglify i rzeźby, niezależnie od tego, czy sala jest wąska, czy przestronna. W CSS działa to podobnie - kontener musi dostosowywać się do dostępnej przestrzeni.

Stały vs płynny layout

Tradycyjnie strony budowano ze stałymi szerokościami w pikselach. Problem? Na małym telefonie treść wychodziła poza ekran, a na ogromnym monitorze zajmowała tylko wąski pasek.

1/* Stały layout - ZŁE podejście */
2.container {
3  width: 960px; /* Zawsze 960px, niezależnie od ekranu */
4}

Rozwiązaniem jest fluid layout (płynny układ) - używamy jednostek procentowych zamiast pikseli:

1/* Płynny layout - DOBRE podejście */
2.container {
3  width: 100%; /* Zajmuje całą dostępną szerokość */
4}

Wzorzec responsywnego kontenera

Kluczowym wzorcem w responsywnym CSS jest responsywny kontener. Łączy trzy właściwości:

1.container {
2  width: 100%;         /* Pełna szerokość na małych ekranach */
3  max-width: 1200px;   /* Ograniczenie na dużych ekranach */
4  margin: 0 auto;      /* Wycentrowanie na stronie */
5}

Jak to działa?

• Na telefonie (320px szerokości) - kontener ma 320px (100% ekranu)
• Na tablecie (768px) - kontener ma 768px (100% ekranu)
• Na laptopie (1366px) - kontener ma 1200px (max-width) i jest wycentrowany
• Na dużym monitorze (1920px) - kontener nadal ma 1200px, wycentrowany z marginesami po bokach

To jak korytarz w piramidzie - treść nigdy nie jest zbyt szeroka, ale na wąskich przejściach wykorzystuje całą dostępną przestrzeń.

box-sizing: border-box

Jedna z najważniejszych deklaracji CSS dla responsywnego projektowania:

1*, *::before, *::after {
2  box-sizing: border-box;
3}

Bez

border-box

, padding i border dodają się do szerokości elementu:

1/* Bez border-box */
2.box {
3  width: 100%;
4  padding: 20px;
5  /* Rzeczywista szerokość: 100% + 40px padding = WYCHODZI POZA EKRAN! */
6}
7
8/* Z border-box */
9.box {
10  box-sizing: border-box;
11  width: 100%;
12  padding: 20px;
13  /* Rzeczywista szerokość: 100% (padding jest WEWNĄTRZ) */
14}

To fundamentalna zasada - bez

border-box

element o

width: 100%

z paddingiem będzie szerszy niż ekran!

Praktyczny przykład: Sekcja z treścią

Zobaczmy jak zbudować responsywną sekcję strony bez użycia Flexboxa czy Grida:

1<section class="features">
2  <div class="container">
3    <h2>O Starożytnym Egipcie</h2>
4    <p>Cywilizacja egipska trwała ponad 3000 lat...</p>
5  </div>
6</section>

1* {
2  box-sizing: border-box;
3}
4
5.features {
6  width: 100%;           /* Sekcja na całą szerokość */
7  padding: 40px 20px;    /* Wewnętrzne odstępy */
8  background-color: #F4E4C1;
9}
10
11.container {
12  width: 100%;
13  max-width: 1200px;
14  margin: 0 auto;       /* Centrowanie */
15  padding: 0 20px;      /* Boczne padding - treść nie przylega do krawędzi */
16}

Wiele kontenerów na stronie

Siła wzorca kontenera polega na tym, że możesz go użyć wielokrotnie:

1<header class="hero">
2  <div class="container">
3    <h1>Piramida Cheopsa</h1>
4  </div>
5</header>
6
7<section class="about">
8  <div class="container">
9    <p>Informacje o piramidzie...</p>
10  </div>
11</section>
12
13<footer class="footer">
14  <div class="container">
15    <p>Stopka strony</p>
16  </div>
17</footer>

Każda sekcja może mieć inny kolor tła na 100% szerokości, ale treść wewnątrz jest zawsze ograniczona przez kontener. Jeśli grafik zmieni projekt i trzeba poszerzyć układ z 1200px na 1440px - zmieniasz jedną wartość

max-width

w klasie

.container

.

Padding jako bezpieczna przestrzeń

Na urządzeniach mobilnych treść nie powinna przylegać do samej krawędzi ekranu. Dlatego dodajemy padding:

1.container {
2  width: 100%;
3  max-width: 1200px;
4  margin: 0 auto;
5  padding-left: 16px;   /* Bezpieczna przestrzeń po lewej */
6  padding-right: 16px;  /* Bezpieczna przestrzeń po prawej */
7}

Na większych ekranach (tabletach) można zwiększyć ten padding za pomocą media queries:

1@media (min-width: 768px) {
2  .container {
3    padding-left: 32px;
4    padding-right: 32px;
5  }
6}

Podsumowanie

Responsywny kontener to fundament każdej strony internetowej:

• width: 100%

  - dopasowanie do małych ekranów

• max-width

  - ograniczenie na dużych ekranach

• margin: 0 auto

  - centrowanie

• box-sizing: border-box

  - padding nie powiększa elementu

• padding

  - bezpieczna przestrzeń od krawędzi

Wypróbuj ten wzorzec w edytorze poniżej: