Hoe OM - Tipiese toestelbreekpunte
Leer hoe om medianavrae vir algemene toestelafbreekpunte te gebruik.
Tipiese toestelbreekpunte
Daar is tonne skerms en toestelle met verskillende hoogtes en breedtes, so dit is moeilik om 'n presiese breekpunt vir elke toestel te skep. Om dinge eenvoudig te hou, kan jy vyf algemene groepe teiken:
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) {...}
Verwante bladsye
CSS-tutoriaal: CSS-medianavrae
CSS Tutoriaal: CSS Media Navrae Voorbeelde
CSS-verwysing: Die @media-reël
RWD-tutoriaal: Responsiewe webontwerp met medianavrae
JavaScript Tutoriaal: Die window.matchMedia() metode