Miten luoda: typillisten laitteiden leikkauspisteet

edellinen sivu suljettavissa oleva luettelo
seuraava sivu liikkuvat HTML-elementit

Opit, miten käyttää media-kyselyjä yleisiin laiteleikkauspisteisiin.

Typilliset laiteleikkauspisteet

On olemassa valtava määrä eri korkeus- ja leveysmittaisia näyttöjä ja laitteita, joten tarkan leikkauspisteen luominen jokaiselle laitteelle on vaikeaa.

Jotta toiminta yksinkertaistuu, voit kohdentaa viisi yleisintä ryhmää:

esimerkki

/* Erittäin pienet laitteet (puhelimet, 600px ja pienemmät) */
@media only screen and (max-width: 600px) {...}
/* Pienten laitteiden (pystysuuntaiset tabletit ja suuret puhelimet, 600px ja suuremmat) */
@media only screen and (min-width: 600px) {...}
/* Keskimääräiset laitteet (pystysuuntaiset tabletit, 768px ja suuremmat) */
@media only screen and (min-width: 768px) {...}
/* Suuret laitteet (kannettavat tietokoneet/pöytäkoneet, 992px ja suuremmat) */
@media only screen and (min-width: 992px) {...}
/* Suuret laitteet (suuret kannettavat tietokoneet ja pöytäkoneet, 1200px ja suuremmat) */
@media only screen and (min-width: 1200px) {...}

kokeile itse