Przejdź do głównej zawartości

Układ responsywny

Wprowadzenie

Responsywna strona dostosowuje sie do szerokosci urzadzenia (telefon, tablet, komputer).

Teoria / Wyjaśnienia

Meta tag dla urzadzen mobilnych:
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
Prosty sposób: używaj procentów i jednostek względnych zamiast sztywnych pikseli.

Praktyczne przykłady

Przykład

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsywna strona</title>
  <style>
    main {
      max-width: 800px;
      margin: 0 auto;
      padding: 1rem;
    }
  </style>
</head>

<body>
  <main>
    <h1>Responsywna strona</h1>
    <p>Ta tresc dopasowuje sie do szerokosci ekranu.</p>
  </main>
</body>

Ćwiczenie

Dodaj meta tag viewport do swojej strony.
Ustaw szerokość głównej kolumny w procentach lub z uzyciem max-width.
Przetestuj stronę w róznych szerokościach okna przeglądarki.