How TO - Typische apparaatonderbrekingen
Meer informatie over het gebruik van mediaquery's voor veelvoorkomende onderbrekingspunten van apparaten.
Typische apparaatonderbrekingen
Er zijn massa's schermen en apparaten met verschillende hoogtes en breedtes, dus het is moeilijk om voor elk apparaat een exact breekpunt te creëren. Om het eenvoudig te houden, kunt u zich richten op vijf veelvoorkomende groepen:
Voorbeeld
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Gerelateerde pagina's
CSS-zelfstudie: CSS-mediaquery's
CSS-zelfstudie: voorbeelden van CSS-mediaquery's
CSS-referentie: de @media-regel
RWD-zelfstudie: responsief webontwerp met mediaquery's
JavaScript-zelfstudie: de methode window.matchMedia()