Responsive webdesign er en tilnærming til å bygge websider der disse sidene dynamisk kan endre deres layout og utseende basert på en besøkendes skjermstørrelse. Store skjermer kan få en layout som passer til de større skjermer, mens mindre enheter, som mobiltelefoner, kan motta samme nettside formatert på en måte som passer for den mindre skjermen. Denne tilnærmingen gir en bedre brukeropplevelse for alle brukere, og det kan til og med bidra til å forbedre søkemotorrangeringer. En viktig del av lydhør webdesign er CSS Media Queries.
Medieforespørsler er som små betingede erklæringer i CSS-filen til nettstedet ditt, slik at du kan angi visse CSS-regler som bare får virkning når en bestemt betingelse er oppfylt - som når en skjermstørrelse er over eller under visse terskler.
Medieforespørsler i aksjon
Så hvordan bruker du Media Queries på et nettsted? Her er et veldig enkelt eksempel:
- Du ville starte med et godt strukturert HTML-dokument uten noen visuelle stiler (det er hva CSS er for)
- I CSS-filen din vil du starte som du vanligvis gjør ved å utforme siden og angi en basislinje for hvordan nettstedet skal se ut. Si at du vil at skriftstørrelsen på siden skal være 16 piksler, du kan skrive dette CSS:
kropp {font-size: 16px; }
- Nå vil du kanskje øke den skriftstørrelsen for større skjermer som har rikelig med eiendommer til å gjøre det. Dette er der Media Queries sparker inn. Du vil starte en Media Query som dette:
@media skjerm og (min bredde: 1000px) {}
- Dette er syntaksen til en medieforespørsel. Det starter med @media for å etablere Media Query selv. Deretter setter du "media type", som i dette tilfellet er "skjerm". Dette gjelder for stasjonære PC-skjermer, tabletter, telefoner, etc. Til slutt avslutter du medieforespørselen med "mediefunksjonen". I vårt eksempel ovenfor er det "midtbredde: 1000px". Dette betyr at Media Query vil sparke inn for skjermer med en bredde på minst 1000 piksler bredt.
- Etter disse elementene i Media Query, legger du til en åpning og lukking krøllete brace som ligner på hva du ville gjøre i en hvilken som helst vanlig CSS-regel.
- Det endelige trinnet til en medieforespørsel er å legge til CSS-reglene som du vil bruke når denne betingelsen er oppfylt. Du legger til disse CSS-reglene mellom de krøllete båndene som utgjør Media Query, slik:
@media skjerm og (min bredde: 1000px) {body {font-size: 20px; }
- Når betingelsene for medieforespørsmålet er oppfylt (nettleservinduet er minst 1000 piksler bredt), vil denne CSS-stilen tre i kraft, og endringen av fontstørrelsen vår fra de 16 pikslene vi opprinnelig opprettet til vår nye verdi på 20 piksler.
Legge til flere stiler
Du kan plassere så mange CSS-regler i denne medieforespørselen etter behov for å justere nettstedets visuelle utseende. Hvis du for eksempel ikke bare vil øke skriftstørrelsen til 20 piksler, men også endre fargen på alle avsnittene til svart (# 000000), kan du legge til dette:
@media skjerm og (min bredde: 1000px) {body {font-size: 20px; } p {farge: # 000000; }}
Legge til flere medieforespørsler
I tillegg kan du legge til flere medieforespørsler for alle større størrelser, og legge dem til stilarket ditt slik:
@media skjerm og (min bredde: 1000px) {body {font-size: 20px; } p {farge: # 000000; {} @ media skjerm og (min bredde: 1400px) {body {font-size: 24px; }}
De første Media Queries ville sparke inn på 1000 piksler bredt, endre skriftstørrelsen til 20 piksler. Så, når nettleseren var over 1400 piksler, endret skriftstørrelsen igjen til 24 piksler. Du kan legge til så mange Media Queries etter behov for ditt eget nettsted.
Min bredde og maksimal bredde
Det er generelt to måter å skrive medieforespørsler på - ved å bruke "min bredde" eller med "maksimal bredde". Så langt har vi sett "min bredde" i aksjon. Dette medfører at mediaforespørslene trer i kraft når en nettleser har nådd minst den minste bredden. Så et spørsmål 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 "maksimal bredde", fungerer det på motsatt måte. En medieforespørsel på "maksimal bredde: 1000px" vil gjelde når nettleseren har falt under denne størrelsen.
Når det gjelder eldre nettlesere
En utfordring med Media Queries er deres mangel på støtte i eldre versjoner av Internet Explorer. Heldigvis finnes det polyfills som kan lappes støtte for Media Queries i de eldre nettleserne, slik at du kan bruke dem på nettsteder i dag, samtidig som du fortsatt sørger for at visningen av dette nettstedet ikke ser ødelagt i eldre nettleserprogramvare.
Redigert av Jeremy Girard på 1/24/17
7
