Mall för en responsiv sida

Innan vi börjar så behöver vi en grundmall för vår responsiva webbplats.Här finns en enkel mall som du kan använda som utgångspunkt, dels HTML-kod och dels CSS-kod.

HTML

Kopiera följande HTML-kod och spara den som som filnamnet public/responsive.html.

<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="utf-8" />
  <!-- Ensures proper scaling on mobile devices -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Responsiv layout</title>
  <link rel="stylesheet" href="css/responsive.css" />
</head>
<body>
  <header>
    <h1>Responsiv Sida</h1>
    <p>Exempel på 1, 2, 3 och 1 kolumn(er)</p>
  </header>

  <main>
    <section class="row cols-1">
      <div class="card">En kolumn</div>
    </section>

    <section class="row cols-2">
      <div class="card">Kolumn 1 av 2</div>
      <div class="card">Kolumn 2 av 2</div>
    </section>

    <section class="row cols-3">
      <div class="card">Kolumn 1 av 3</div>
      <div class="card">Kolumn 2 av 3</div>
      <div class="card">Kolumn 3 av 3</div>
    </section>

    <section class="row cols-1">
      <div class="card">Avslutande kolumn</div>
    </section>
  </main>
</body>
</html>

HTML-sidan är uppdelad i en header och en main sektion. Innehållet i main är uppdelat i olika rader .row med olika antal kolumner .card i varje rad.

Notera konstruktionen meta viewport i head. Den är viktig för att sidan skall skalas korrekt på mobila enheter och den talar om för webbläsaren att sätta sidans bredd lika med enhetens bredd och att skala innehållet därefter. Detta säkerställer att sidan visas korrekt på mobila enheter.

  <!-- Ensures proper scaling on mobile devices -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />

CSS

Kopiera följande CSS-kod och spara den som som filnamne public/css/responsive.css.

/* Basic page styling */
body {
  margin: 0;
  font-family: sans-serif;
}

/* Header styling */
header {
  background: #333;
  color: white;
  text-align: center;
  padding: 1rem;
}

/* Main content area */
main {
  padding: 1rem;
}

/* Row layout using flexbox */
.row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Column layouts: 1, 2, and 3 columns */
.cols-1 .card { flex: 1; }
.cols-2 .card { flex: 1 1 45%; }
.cols-3 .card { flex: 1 1 30%; }

/* Card styling */
.card {
  background: #eee;
  padding: 1rem;
  text-align: center;
  border-radius: 5px;
}

/* Background colors for rows */
.cols-1 .card { background-color: #FFD9D9; } /* pastel pink */
.cols-2 .card { background-color: #D9F0FF; } /* pastel blue */
.cols-3 .card { background-color: #D9FFD9; } /* pastel green */

Stylesheeten är uppdelad i rader .row och kolumner .card. Vi har tre olika kolumnlayouter med 1, 2 eller 3 kolumner. Varje rad har en bakgrundsfärg för att vi lättare skall kunna se skillnaden mellan raderna.

Prova webbsidan

Om du öppnar responsive.html i din webbläsare så ser du en enkel sida med ett antal rader med olika antal kolumner.

Det kan se ut så här.

Image description — Bild: Så här ser den responsiva webbsidan ut.

Prova nu att göra bredden i webbsidan så liten som möjligt. Du kan dra i kanten av webbläsarfönstret.

Det kan se ut så här.

Än så länge finns ingen responsivitet i sidan. Den ser likadan ut oavsett skärmstorlek.

Använd devtools för mobil design

Du kan också använda devtools för att simulera olika enheter. I Chrome kan du öppna devtools med F12 och sedan klicka på ikonen för “Toggle device toolbar” eller trycka Ctrl+Shift+M.

Som sagt, ännu finns ingen responsivitet i sidan. Den ser likadan ut oavsett skärmstorlek.

Nu har du en grundmall för en responsiv webbsida som du kan bygga vidare på i denna övningen.