Hvordan skriver du en CSS-medieforespørsel?
Kjenn syntaksen for både min-bredde og maks-bredde mediespørringer
Responsivt webdesign er en tilnærming til å bygge nettsider der disse sidene dynamisk kan endre layout og utseende basert på en besøkendes skjermstørrelse . Store skjermer får et oppsett som passer til de større skjermene, mens mindre enheter, som mobiltelefoner, mottar det samme nettstedet formatert på en måte som passer for den mindre skjermen. Denne tilnærmingen gir en bedre brukeropplevelse for alle brukere, og den kan til og med hjelpe forbedre søkemotorrangeringer . CSS Media Queries utgjør en viktig del av responsiv webdesign.
Medieforespørsler er som små betingede utsagn i nettstedets CSS-fil, som lar deg angi visse CSS-regler som bare trer i kraft når en bestemt betingelse er oppfylt – som når en skjermstørrelse er over eller under visse terskler.
Media Queries er nå standard, men svært gamle versjoner av Internet Explorer støtter dem ikke.
Medieforespørsler i aksjon
Start med en godt strukturertHTML-dokumentfri for visuelle stiler.
Stil siden i CSS-filen din og sett en grunnlinje for hvordan nettstedet vil se ut. For å gjengi skriftstørrelsen på siden til 16 piksler, skriv dette CSS :
|_+_|Legge til flere mediesøk
I tillegg kan du legge til flere mediesøk for hver større størrelse, og sette dem inn i stilarket ditt slik:
|_+_|De første medieforespørslene starter med en bredde på 1000 piksler, og endrer skriftstørrelsen til 20 piksler. Så, når nettleseren var over 1400 piksler, ville skriftstørrelsen endres igjen til 24 piksler. Legg til så mange medieforespørsler som nødvendig for ditt nettsted.
Min-Bredde og Maks-Bredde
Det er vanligvis to måter å skrive mediesøk på – ved å bruke min bredde eller med maks bredde . Så langt har vi sett min-bredde i aksjon. Denne tilnærmingen aktiverer Media Queries etter at en nettleser når minst den minimumsbredden. Så en spørring som bruker min bredde: 1000px gjelder når nettleseren er minst 1000 piksler bred. Denne stilen med Media Query brukes når du bygger et nettsted på en mobil-først måte.
Hvis du bruker maks bredde , fungerer det på motsatt måte. En medieforespørsel på 'max-width: 1000px' gjelder etter at nettleseren har falt under denne størrelsen.