Hoe te maken: typische apparaat-breakpoints

vorige pagina sluitbare lijstitems
volgende pagina draagbare HTML-elementen

Leer hoe je media queries kunt gebruiken voor typische apparaat-breakpoints.

Typische apparaat-breakpoints

Er zijn veel schermen en apparaten met verschillende hoogtes en breedtes, dus het is moeilijk om nauwkeurige breakpoints voor elk apparaat te maken.

Om de operatie te vereenvoudigen, kunt u zich richten op vijf veelvoorkomende groepen:

voorbeeld

/* uiterst kleine apparaten (telefoons, 600px en lager) */
@media only screen and (max-width: 600px) {...}
/* kleine apparaten (verticale tablets en grote smartphones, 600px en hoger) */
@media only screen and (min-width: 600px) {...}
/* gemiddelde apparaten (horizontale tablets, 768px en hoger) */
@media only screen and (min-width: 768px) {...}
/* grote apparaten (laptops en desktops, 992px en hoger) */
@media only screen and (min-width: 992px) {...}
/* extreme apparaten (grote laptops en desktops, 1200px en hoger) */
@media only screen and (min-width: 1200px) {...}

probeer het zelf