Verschillende mediums en verschillende breedtes
/* mobiel */
@media screen and (min-width: 480px) {
body {
background-color: lightblue;
}
}
/* tablet */
@media screen and (min-width: 481px) and (max-width:768px) {
body {
background-color: green;
}
}
/* laptops en small desktops */
@media screen and (min-width: 769px) and (max-width:1279px) {
body {
background-color: pink;
}
}
/* large desktops */
@media screen and (min-width: 1280px) {
body {
background-color: purple;
}
}
Bekijk het voorbeeld hier en maak dit eerst na.
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Bekijk hier een voorbeeldje.
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
of in flex taal
@media screen and (max-width: 600px) {
.topnav a {
flex-direction: column;
width: 100%;
}
}