Flytande layout

Viktiga begrepp:

• Procentbaserade bredder: Element har en bredd uttryckt i procent, vilket gör att de anpassar sig till containerns storlek.
• Flerxibla enheter: Enheter som em och rem baseras på webbläsarens teckensnittsstorlek, vilket gör att elementen anpassar sig till användarens preferenser.
• Relativa teckensnittsstorlekar: Teckensnittsstorlekar uttrycks i relativa enheter (t.ex. rem), vilket gör att de ändras i proportion till containerns storlek.

Praktiska steg:

• Använd procentbaserade bredder för containrar och kolumner:

.container {
  width: 100%;
}

.column {
  width: 50%;
}

• Använd flexibla enheter för innehållets storlek:

p {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

• Använd relativa teckensnittsstorlekar för övergripande teckensnittsändringar:

body {
  font-size: 62.5%;
}

• Använd media queries för att anpassa layouten för olika skärmstorlekar:

@media (max-width: 768px) {
  .column {
    width: 100%;
  }
}

Tillgänglighetstips:

• Se till att alla element är åtkomliga med hjälp av tangentbord.
• Använd tydlig och enkel navigering.
• Använd tillräckligt med kontrast mellan text och bakgrund.
• Tillhandahåll alternativ text för bilder.