for å implementere responsive web design, er det viktig å forstå media spørringer I CSS, spesielt media bare og media screen spørringer.

La oss begynne med det åpenbare spørsmålet.

hva er en medieforespørsel?

en mediespørring er en teknikk som ble introdusert I CSS3. Spørringen innebærer å bruke @media-regelen til å kjøre EN BLOKK MED CSS-egenskaper i tilfelle en forutbestemt betingelse er sant.

for eksempel, koden nedenfor tilsier at hvis nettleservinduet er 400px eller mindre, vil bakgrunnsfargen være lys grønn:

@media bare skjerm og (maks bredde: 400px) {
body {
Bakgrunnsfarge: lightgreen;
}
}

Media spørringer er spesielt nyttig med å legge stoppunkter for responsiv design. Siden avbruddspunkter i hovedsak er pikselnumre der innhold eller design vises annerledes enn brukerne, brukes mediespørringer til å definere hvilke endringer som må skje på hvilke piksler.

i eksemplet nedenfor angir koden at hvis nettleservinduet er redusert under 600px, skal hver kolonnebredde bli 100%:

/ * for desktop: */
.col-1 {bredde: 8,33%;}
.col – 2 {bredde: 16,66%;}
.col – 3 {bredde: 25%;}
.col-4 {bredde: 33,33%;}
.col-5 {bredde: 41,66%;}
.col-6 {bredde: 50%;}
.col-7 {bredde: 58,33%;}
.col-8 {bredde: 66,66%;}
.col-9 {bredde: 75%;}
.col-10 {bredde: 83,33%;}
.col-11 {bredde: 91,66%;}
.col-12 {bredde: 100%;}

@media bare skjerm og (maks bredde: 600px) {
/* for mobiltelefoner: */
{
bredde: 100%;
}
}

hver mediespørring består av en valgfri medietype og ett eller flere mediefunksjonsuttrykk. Det er mulig å kombinere flere mediespørringer med logiske operatører. Alle medieforespørsler er case-sensitive.

hver mediespørring anses som sann når den angitte medietypen samsvarer med enhetene som nettstedet vises på. I tillegg må mediefunksjonsuttrykkene også være sanne.

hva er medieskjermspørringen?

@media screen spørringen betyr ganske enkelt at spørringen i spørsmålet er ment for fargeskjermer eller enheter som støtter en» skjerm » – modus.La oss ta et eksempel:

@media screen og (maks bredde: 500px)

spørringen ovenfor gjelder for skjermer med en maksimal bredde på 500 piksler. Poenget med dette er hovedsakelig å rette koden for å skille mellom skjerm og andre medietyper (for eksempel utskrift, blindeskrift, preget, håndholdt, etc.).

hva er media-only spørringen?

ved å legge til den logiske operatoren ‘bare’ i mediespørringen, sikrer utvikleren at spørringen bare brukes hvis hele betingelsen samsvarer. Hvis du ikke bruker bare, kan det hende at eldre nettlesere ikke leser eller tolker alle mediefunksjonsuttrykkene. Hvis for eksempel spørringen er

@media screen og (maks bredde:500px)

eldre nettlesere kan tolke spørringen som bare skjerm og ignorere pikselantallet. Dette vil føre til bruk av spørringsbetingelsen på alle skjermer. For å forhindre dette, kan du bruke:

@media bare skjerm og (maks bredde:500px)

når du bruker den eneste operatøren, må du angi medietypen.

Betydning i responsive design

Media spørringer er instrumental i å implementere responsive web design. Spørsmålene som er omtalt ovenfor er to av de mest brukte og er nyttige for å sikre at innholdet på nettstedet ditt er optimalisert for enhetsstørrelser og typer.

når DU har brukt CSS-spørringer på nettstedet ditt, må du kontrollere effektiviteten. Den enkleste måten å gjøre dette på er å bruke et verktøy som lar deg teste webdesign på ekte enheter og nettlesere. Det er flere verktøy for å lette dette, men ta deg tid til å finne en responsiv kontrollør på nettet som gir deg muligheten til å teste på et tilstrekkelig bredt utvalg av enheter — både stasjonær og mobil.