extra credit
Je kan je layout er zelfs nog beter uit laten zien op mobiel door meta viewport te gebruiken.
Leer CSS Layout
"Responsive Design" is de strategie in het maken van een site die "reageert" naar de browser en het apparaat waar het op getoond wordt... zodoende er super uit te zien ongeacht alles.
Media queries is de meest krachtige tool om dit te bewerkstelligen. We nemen onze percentage layout erbij en passen het aan naar het tonen van één kolom als de browser te smal is om het menu in de sitebar te tonen:
@media (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media (max-width:599px) {
nav li {
display: inline;
}
}Als je nu je browser gaat verkleinen of vergroten is het nog cooler dan ooit!
</section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>
Tada! Nu ziet onze layout er ook goed uit op mobiele browsers. Hier zijn verschillende populaire sites die media queries inzetten om een dergelijk resultaat te behalen. Er is zoveel meer om te detecteren naast min-width en max-width: bekijk de MDN documentatie wat er verder nog mogelijk is.
Je kan je layout er zelfs nog beter uit laten zien op mobiel door meta viewport te gebruiken.
