InnoMarts logo
InnoMarts
Fast websites
← Back to course

Responsive Design

Responsive Design

Witaj ponownie.

W poprzedniej lekcji nauczyłeś się CSS Grid.

Rows.

Columns.

Cards zachowujące się jak zdyscyplinowane małe pudełka.

Bardzo dobrze.

Teraz musimy sprawić, żeby te layouty działały na różnych rozmiarach ekranu.

Bo strona, która wygląda pięknie tylko na twoim laptopie, nie jest skończona.

Ona jest po prostu pewna siebie w jednym pokoju.

Użytkownicy mogą otworzyć twoją stronę na:

Responsive design pomaga stronie się dostosować.

Cel jest prosty:

strona ma być czytelna, wygodna i przyjemna na każdym ekranie.

Bez zmuszania użytkownika do zoomowania, przewijania w bok albo kwestionowania twoich życiowych decyzji.

Czego Się Nauczysz

W tej lekcji nauczysz się:

Czym Jest Responsive Design?

Responsive design oznacza tworzenie stron, które dopasowują się do różnych rozmiarów ekranu.

Layout desktopowy może mieć:

Layout mobilny zwykle potrzebuje:

Responsive design nie oznacza tworzenia pięciu różnych stron.

Oznacza stworzenie jednej elastycznej strony.

Jedna strona.

Wiele ekranów.

Mniej chaosu.

Więcej godności.

Viewport Meta Tag

Responsive design zaczyna się w HTML.

Wewnątrz head powinieneś mieć tę linię:

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

Ta linia mówi przeglądarce:

Użyj prawdziwej szerokości urządzenia i nie udawaj, że telefon jest małym desktopem.

Bez tej linii przeglądarki mobilne mogą dziwnie skalować albo powiększać stronę.

Twój CSS może być perfekcyjny.

Ale bez viewport meta tag telefon nadal może zachowywać się tak, jakby znalazł twój layout w starożytnej jaskini.

Zawsze go dodawaj.

Stwórz Projekt

Stwórz folder dla tej lekcji:

mkdir css-lesson7
cd css-lesson7
touch index.html
touch style.css

Powinieneś mieć:

css-lesson7/
  index.html
  style.css

Otwórz folder w swoim edytorze.

Zbudujemy małą responsive page z:

Potem sprawimy, że będzie dostosowywać się do mniejszych ekranów.

Bez paniki.

Tylko CSS.

Co czasem oznacza to samo.

Ale dzisiaj zachowujemy spokój.

Napisz HTML

Otwórz index.html i dodaj to:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <nav class="navbar">
      <h1 class="logo">ResponsiveSite</h1>

      <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Kursy</a>
        <a href="#">Projekty</a>
        <a href="#">Kontakt</a>
      </div>
    </nav>

    <section class="hero">
      <div class="hero-text">
        <h2>Buduj Strony dla Każdego Ekranu</h2>
        <p>
          Responsive design pomaga layoutowi dostosować się do telefonów, tabletów, laptopów i dużych monitorów.
        </p>
        <a href="#" class="button">Zacznij Naukę</a>
      </div>

      <div class="hero-image">
        <img src="https://via.placeholder.com/600x400" alt="Przykład responsive design">
      </div>
    </section>
  </header>

  <main class="page">
    <section class="intro">
      <h2>Dlaczego Responsive Design Jest Ważny</h2>
      <p>
        Ludzie odwiedzają strony z wielu urządzeń. Twój layout powinien działać wszędzie, nie tylko na twoim ulubionym ekranie.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Elastyczne Layouty</h2>
        <p>Używaj elastycznych szerokości, Grid i Flexbox, aby tworzyć layouty, które się dostosowują.</p>
      </article>

      <article class="card">
        <h2>Czytelny Tekst</h2>
        <p>Tekst powinien być wygodny do czytania zarówno na małych, jak i dużych ekranach.</p>
      </article>

      <article class="card">
        <h2>Media Queries</h2>
        <p>Używaj media queries, aby zmieniać style przy różnych rozmiarach ekranu.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Stworzone podczas nauki responsive design.</p>
  </footer>
</body>
</html>

Ten HTML zawiera viewport meta tag.

Dobrze.

Twoja strona jest już bardziej przygotowana na ekrany mobilne niż wiele stron z 2009 roku.

Małe zwycięstwo.

Zacznij od Bazowego CSS

Otwórz style.css i dodaj:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

Ważna część:

img {
  max-width: 100%;
  display: block;
}

To sprawia, że obrazy są responsive.

Obraz nie będzie szerszy niż jego container.

Bez tego duże obrazy mogą zepsuć layout.

Obrazy są jak entuzjastyczni goście.

Miło ich mieć.

Ale potrzebują granic.

Wystylizuj Header i Navbar

Dodaj to:

.site-header {
  background-color: #111827;
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Na desktop logo i links będą w jednym row.

To dobre dla szerokich ekranów.

Ale na telefonach może zabraknąć miejsca.

Naprawimy to później za pomocą media query.

Na razie desktop layout.

Jak budowanie stołu przed decyzją, gdzie usiądzie kot.

Wystylizuj Hero Section

Dodaj:

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-text h2 {
  margin: 0 0 16px;
  font-size: 48px;
  line-height: 1.1;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

.hero-image img {
  border-radius: 24px;
  border: 2px solid #374151;
}

Hero używa Grid z dwiema columns:

grid-template-columns: 1fr 1fr;

To dobre dla desktop.

Tekst po jednej stronie.

Obraz po drugiej.

Bardzo porządnie.

Ale na telefonie dwie columns mogą stać się zbyt wąskie.

Więc później zmienimy je w jedną column.

CSS musi nauczyć się dobrych manier.

Wystylizuj Main Page

Dodaj:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

To daje contentowi wygodną szerokość.

max-width pilnuje, żeby strona nie była zbyt szeroka.

padding trzyma content z dala od krawędzi ekranu.

Na telefonach padding przy krawędziach jest bardzo ważny.

Tekst przyklejony do krawędzi ekranu jest nieprzyjemny.

Jak krzesło z jedną podejrzaną nogą.

Stwórz Responsive Cards

Dodaj:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.card h2 {
  margin-top: 0;
  font-size: 24px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

Na desktop pokazujemy trzy cards w jednym row.

To dobrze.

Ale na tabletach i telefonach potrzebujemy mniej columns.

Tutaj wchodzą media queries.

Media queries to CSS mówiący:

“W określonych warunkach zachowam się inaczej.”

Bardzo dojrzale.

Gdyby tylko wszystkie layouty były tak emocjonalnie dostępne.

Czym Jest Media Query?

Media query pozwala zastosować CSS tylko wtedy, gdy określone warunki są prawdziwe.

Przykład:

@media (max-width: 800px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

To oznacza:

Jeśli ekran ma 800px szerokości albo mniej, ustaw cards w jednej column.

Media queries są niezbędne dla responsive design.

Pozwalają layoutowi się dostosować.

Nie panikować.

Dostosować.

Duża różnica.

Zrób Layout Responsive

Dodaj to na końcu CSS:

@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-text h2 {
    font-size: 40px;
  }
}

Teraz:

To lepsze dla tabletów i mniejszych ekranów.

Jeszcze nie perfekcyjne.

Ale lepsze.

Responsive design to nie jedna wielka poprawka.

To seria rozsądnych decyzji.

Jak życie.

Ale z większą liczbą średników.

Popraw Layout Telefoniczny

Dodaj kolejne media query:

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero {
    padding: 48px 20px;
  }

  .hero-text h2 {
    font-size: 34px;
  }

  .hero-text p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro,
  .card {
    padding: 24px;
  }
}

Teraz na telefonach:

To responsive design w akcji.

Ten sam HTML.

Inny layout zależnie od ekranu.

Bardzo potężne.

Bardzo użyteczne.

Prawie podejrzanie cywilizowane.

CSS Mobile-First

Istnieją dwa popularne podejścia.

Desktop-first:

.cards {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 560px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Mobile-first:

.cards {
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

Mobile-first oznacza, że najpierw piszesz layout mobilny, a potem dodajesz szersze layouty dla większych ekranów.

Często to dobre podejście.

Dlaczego?

Bo małe ekrany mają więcej ograniczeń.

Jeśli design działa na telefonie, rozszerzenie go na desktop jest zwykle łatwiejsze.

Jak najpierw spakować plecak, a potem przeprowadzić się do domu.

Nie odwrotnie.

Elastyczne Szerokości

Unikaj fixed widths, kiedy możesz.

Źle:

.card {
  width: 400px;
}

To może zepsuć się na małych ekranach.

Lepiej:

.card {
  width: 100%;
  max-width: 400px;
}

Albo pozwól Grid kontrolować szerokość:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Fixed widths nie zawsze są złe.

Ale trzeba używać ich ostrożnie.

Fixed width na desktop może stać się katastrofą na mobile.

CSS pamięta wszystko.

A mobile ujawnia twoje grzechy.

Responsive Text

Duże desktop headings mogą być za duże na telefonach.

Desktop:

.hero-text h2 {
  font-size: 48px;
}

Telefon:

@media (max-width: 560px) {
  .hero-text h2 {
    font-size: 34px;
  }
}

To utrzymuje tekst czytelny bez przytłaczania ekranu.

Duży tekst jest fajny.

Tekst, który zjada cały ekran telefonu, nie jest fajny.

To nie heading.

To sytuacja zakładnicza.

Pełny CSS

Twój style.css powinien wyglądać tak:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.site-header {
  background-color: #111827;
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-text h2 {
  margin: 0 0 16px;
  font-size: 48px;
  line-height: 1.1;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

.hero-image img {
  border-radius: 24px;
  border: 2px solid #374151;
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.card h2 {
  margin-top: 0;
  font-size: 24px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-text h2 {
    font-size: 40px;
  }
}

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero {
    padding: 48px 20px;
  }

  .hero-text h2 {
    font-size: 34px;
  }

  .hero-text p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro,
  .card {
    padding: 24px;
  }
}

Zapisz plik.

Odśwież browser.

Zmień rozmiar okna.

Layout powinien się zmieniać.

Desktop:

Tablet:

Telefon:

Gratulacje.

Twój layout już nie boi się telefonów.

Częste Błędy

Zapomnienie viewport meta tag

Bez tego:

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

layout mobilny może zachowywać się źle.

Zawsze go dodawaj.

Nie negocjuj z tą linią.

Jest mała, ale potężna.

Jak mały ochroniarz CSS.

Tworzenie poziomego scrolla

Poziomy scroll często pojawia się, bo coś jest za szerokie.

Częste powody:

Jeśli strona przewija się w bok na mobile, sprawdź to.

Sideways scrolling to zwykle wołanie o pomoc.

Zbyt Mały Tekst

Użytkownicy telefonu nie powinni potrzebować mikroskopu.

Źle:

p {
  font-size: 12px;
}

Lepiej:

p {
  font-size: 16px;
  line-height: 1.6;
}

Czytelny tekst ma znaczenie.

Piękny layout z nieczytelnym tekstem to tylko dekoracja z problemami zaufania.

Praktyka

Stwórz responsive page z:

Niech działa tak:

Użyj:

Testuj przez zmianę rozmiaru browser.

Nie ufaj tylko jednemu ekranowi.

Jeden ekran kłamie.

Wiele ekranów mówi prawdę.

Mini Wyzwanie

Weź card grid z poprzedniej lekcji.

Zrób ją responsive:

Potem dodaj responsive hero nad nią.

Użyj Grid dla hero.

Użyj Grid dla cards.

Użyj Flexbox dla navbar.

To prawdziwy pattern layoutu webowego.

Nie uczysz się tylko teorii.

Budujesz strukturę używaną na realnych stronach.

Layout dorasta.

Postaraj się nie płakać.

Podsumowanie

Dzisiaj nauczyłeś się, że:

Strona musi działać tam, gdzie naprawdę są użytkownicy.

A użytkownicy są wszędzie.

Phones.

Tablets.

Laptops.

Dziwne devices.

Może nawet smart fridges.

Nie buduj tylko dla swojego ekranu.

Buduj dla prawdziwego życia.

Prawdziwe życie ma wiele screen sizes i bardzo mało cierpliwości.

Następna Lekcja

W następnej lekcji nauczymy się backgrounds, borders i shadows.

Sprawimy, że sections, cards i buttons będą wyglądać bardziej polished.

Nie overdecorated.

Polished.

Jest różnica.

Bardzo ważna różnica.