Responsief webdesign - rasterweergave
Wat is een rasterweergave?
Veel webpagina's zijn gebaseerd op een rasterweergave, wat betekent dat de pagina is opgedeeld in kolommen:
Het gebruik van een rasterweergave is erg handig bij het ontwerpen van webpagina's. Het maakt het gemakkelijker om elementen op de pagina te plaatsen.
Een responsieve rasterweergave heeft vaak 12 kolommen en heeft een totale breedte van 100%, en wordt kleiner en groter als u het formaat van het browservenster aanpast.
Voorbeeld: responsieve rasterweergave
Een responsieve rasterweergave bouwen
Laten we beginnen met het bouwen van een responsieve rasterweergave.
Zorg er eerst voor dat alle HTML-elementen de box-sizingeigenschap hebben ingesteld op
border-box. Dit zorgt ervoor dat de opvulling en de rand worden opgenomen in de totale breedte en hoogte van de elementen.
Voeg de volgende code toe aan je CSS:
* {
box-sizing: border-box;
}
Lees meer over de box-sizingeigenschap in ons hoofdstuk CSS Box Sizing .
Het volgende voorbeeld toont een eenvoudige responsieve webpagina, met twee kolommen:
Voorbeeld
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Het bovenstaande voorbeeld is prima als de webpagina slechts twee kolommen bevat.
We willen echter een responsieve rasterweergave met 12 kolommen gebruiken om meer controle over de webpagina te hebben.
Eerst moeten we het percentage voor één kolom berekenen: 100% / 12 kolommen = 8,33%.
Vervolgens maken we één klasse voor elk van de 12 kolommen, class="col-"en een nummer dat bepaalt hoeveel kolommen de sectie moet beslaan:
CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
Al deze kolommen moeten naar links zweven en een opvulling van 15px hebben:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Elke rij moet worden verpakt in een <div>. Het aantal kolommen in een rij moet altijd 12 zijn:
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
De kolommen in een rij zweven allemaal naar links en worden daarom uit de stroom van de pagina gehaald, en andere elementen worden geplaatst alsof de kolommen niet bestaan. Om dit te voorkomen, voegen we een stijl toe die de stroom opruimt:
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
We willen ook enkele stijlen en kleuren toevoegen om het er beter uit te laten zien:
Voorbeeld
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
Merk op dat de webpagina in het voorbeeld er niet goed uitziet als u het browservenster verkleint tot een zeer kleine breedte. In het volgende hoofdstuk leer je hoe je dat kunt oplossen.