Wat is responsive design?
Hoe maak je een website responsive?
Min- en max-values
img {
width: 90%;
max-width: 300px;
}
img {
width: 50%;
mix-width: 50px;
}
Media queries: Oriëntatie (Liggend/Portret)
/* Portretmodus */
@media only screen and (orientation: portrait) {
body {
background-color: black;
}
}
/* Liggende */
@media only screen and (orientation: landscape) {
body {
background-color: white;
}
}
Media queries: Scherm breedte
/* Schermen breder van 700px */
@media screen and (min-width: 700px) {
body {
background-color: black;
}
}
/* Schermen tussen 530px en 700px breed */
@media screen and (max-width: 700px) and (min-width: 530px) {
body {
background-color: grey;
}
}
/* Schermen kleiner dan 530px breed */
@media (max-width: 530px) {
body {
background-color: white;
}
}
Opdracht: Responsive design
Maak een nieuwe website via de regels van responsive design.
Je website heeft deze zaken:
- Navigatie balk die overgaat in een hamburger menu of bottom navigation.
- Landing page met duidelijke call to action.
