Hur skapas: typiska enhetsbrytpunkter

föregående sida stängbara listpunkter
nästa sida flyttbara HTML-element

Lär dig hur du använder media-uttryck för vanliga enhetsbrytpunkter.

Typiska enhetsbrytpunkter

Det finns ett stort antal skärmar och enheter med olika höjder och bredder, så det är svårt att skapa exakta brytpunkter för varje enhet.

För att förenkla manipulation kan du lokalisera fem vanliga grupper:

exempel

/* mycket små enheter (telefoner, 600px och lägre) */
@media endast skärm och (max-bredd: 600px) {...}
/* små enheter (vertikala surfplattor och stora telefoner, 600px och högre) */
@media endast skärm och (min-bredd: 600px) {...}
/* medelstora enheter (horisontella surfplattor, 768px och högre) */
@media endast skärm och (min-bredd: 768px) {...}
/* stora enheter (bärbara datorer/stationära datorer, 992px och högre) */
@media endast skärm och (min-bredd: 992px) {...}
/* mycket stora enheter (stora bärbara datorer och stationära datorer, 1200px och högre) */
@media endast skärm och (min-bredd: 1200px) {...}

prova själv