Sådan oprettes: typiske enhedsskillepunkter

forrige side lukkelige listeemner
næste side traggable HTML-elementer

Lær, hvordan du bruger medieforespørgsler til almindelige enhedsskillepunkter.

Typiske enhedsskillepunkter

Der findes et stort antal skærme og enheder med forskellige højder og bredder, så det er svært at skabe præcise skillepunkter for hver enhed.

For at forenkle operationen kan du定位五個常見的組別：

eksempel

/* Ekstremt små enheder (mobiltelefoner, 600px og derunder) */
@media only screen and (max-width: 600px) {...}
/* Små enheder (låsefast tablet og store mobiltelefoner, 600px og derover) */
@media only screen and (min-width: 600px) {...}
/* Mellemstore enheder (låsefast tablet, 768px og derover) */
@media only screen and (min-width: 768px) {...}
/* Store enheder (bærbare computere/stationære computere, 992px og derover) */
@media only screen and (min-width: 992px) {...}
/* Store enheder (store bærbare computere og stationære computere, 1200px og derover) */
@media only screen and (min-width: 1200px) {...}

prøv det selv