Slik bruker du mediespørringer i HTML og CSS til å lage responsive nettsteder

Slik bruker du mediespørringer i HTML og CSS til å lage responsive nettsteder

Hvis du vil utvikle nettsteder/webapplikasjoner, er det avgjørende for din suksess å vite hvordan du lager responsive design.





Tidligere var opprettelsen av nettsteder som tilpasset seg godt til forskjellige skjermstørrelser en luksus som nettstedseiere måtte be om fra en utvikler. Imidlertid har oppgangen i bruk av smarttelefoner og nettbrett nå gjort responsiv design til en nødvendighet i verden av programvareutvikling.



Å bruke medieforespørsler er uten tvil den beste måten å sikre at nettstedet/nettappen din vises akkurat slik du vil at den skal på hver enhet.





Forstå responsivt design

I et nøtteskall omhandler responsiv design bruk av HTML/CSS for å lage et nettsted/webapp -oppsett som tilpasser seg forskjellige skjermstørrelser. I HTML/CSS er det noen få forskjellige måter å oppnå respons på et nettsteddesign:

  • Bruke rem- og em -enheter i stedet for piksler (px)
  • Angi visningsport/skala for hver webside
  • Bruke mediespørsmål

Hva er mediespørsmål?

En mediespørring er en funksjon i CSS som ble utgitt i CSS3 -versjonen. Med introduksjonen av denne nye funksjonen får brukere av CSS muligheten til å justere visningen av en webside basert på en enhet/skjermhøyde, bredde og orientering (liggende eller stående modus).



Les mer: The Essential CSS3 Properties Cheat Sheet

Medieforespørsler gir et rammeverk for å lage kode én gang og bruke den flere ganger gjennom programmet. Dette virker kanskje ikke så nyttig hvis du utvikler et nettsted med bare tre nettsider, men hvis du jobber for et selskap med hundrevis av forskjellige nettsider - vil dette vise seg å være en massiv tidsbesparelse.



Bruke mediespørsmål

Det er flere forskjellige ting du må ta hensyn til når du bruker mediespørringer: struktur, plassering, rekkevidde og kobling.

Strukturen av medieforespørsler

Eksempel på en medieforespørgselsstruktur


@media only/not media-type and (expression){
/*CSS code*/
}

Den generelle strukturen til et mediespørsmål inkluderer:



  • Søkeordet @media
  • Søkeordet ikke/bare
  • En medietype (som enten kan være skjerm, utskrift eller tale)
  • Søkeordet og
  • Et unikt uttrykk omgitt av parenteser
  • CSS -kode vedlagt i et par åpne og nære krøllete seler.

I slekt: Bruke CSS til å formatere dokumenter for utskrift

Eksempel på en mediespørring med det eneste søkeordet


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

Eksemplet ovenfor gjelder CSS -styling (spesielt en blå bakgrunnsfarge) på bare enhetsskjermer som har en bredde på 450 piksler og mindre - så i utgangspunktet smarttelefoner. Det eneste søkeordet kan erstattes med ikke -søkeordet, og deretter vil CSS -styling i mediespørringen ovenfor bare gjelde for utskrift og tale.

Imidlertid gjelder som standard en generell medieforespørgselserklæring for alle tre medietypene, så det er ikke nødvendig å spesifisere en medietype med mindre målet er å ekskludere en eller flere av dem.

Standard Media Query -eksempel


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Plassering av mediespørsmål

En mediespørring er en CSS -egenskap; den kan derfor bare brukes innenfor stylingspråket. Det er tre forskjellige måter å inkludere CSS i koden din; Imidlertid er det bare to av disse metodene som gir en praktisk måte å inkludere mediespørsmål i programmene dine - intern eller ekstern CSS.

Den interne metoden inkluderer å legge til taggen i taggen til HTML -filen og opprette mediespørringen innenfor parameterne i taggen.

Den eksterne metoden innebærer å opprette en mediespørring i en ekstern CSS -fil og koble den til HTML -filen din via taggen.

Utvalget av medieforespørsler

Uansett om mediespørringer brukes via intern eller ekstern CSS, er det et hovedaspekt ved stylingspråket som kan påvirke hvordan en medieforespørsel fungerer. CSS har en prioritetsrekkefølge. Når du bruker en CSS -velger, eller i dette tilfellet en mediespørring, overstyrer hver ny mediespørring som legges til CSS -filen (eller har forrang fremfor) den som kom før.

Standard mediesøkekode som vi har ovenfor, er rettet mot smarttelefoner (450 piksler bredt og under), så hvis du ville angi en annen bakgrunn for nettbrett, kan du tro at du ganske enkelt kan legge til følgende kode i din eksisterende CSS-fil.

Eksempel på forespørsel om nettbrett


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

Det eneste problemet er at, på grunn av prioritetsrekkefølgen, ville nettbrett ha en rød bakgrunnsfarge og smarttelefoner ville nå også ha en rød bakgrunnsfarge fordi 450px og under er under 800px.

En måte å løse dette lille problemet ville være å legge til mediespørringen for nettbrett før de for smarttelefoner; sistnevnte ville overstyre den tidligere, og du ville nå ha smarttelefoner med en blå bakgrunnsfarge og nettbrett med en rød bakgrunnsfarge.

Imidlertid er det en bedre måte å oppnå separat styling for smarttelefoner og nettbrett uten å være bekymret for rekkefølgen. Dette er en funksjon i mediespørsmål kjent som områdespesifikasjon, der utvikleren kan lage en mediespørring med maksimal og minimum bredde (området).

Nettbrettmedieforespørsel med rekkeviddeeksempel


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

Med eksemplet ovenfor blir plassering av mediespørringer i et stilark irrelevant ettersom designet for nettbrett og smarttelefoner er rettet mot to separate breddesamlinger.

Hvis du ikke vil legge inn medieforespørsler i CSS -koden din, er det en alternativ metode du kan bruke. Denne metoden innebærer å bruke mediespørringer i koden til en HTML -fil, så i stedet for å ha et massivt stilark som inneholder stylingspreferanser for smarttelefoner, nettbrett og datamaskiner - kan du bruke tre separate CSS -filer og lage mediespørringer i koden.

Koden er et HTML -element som brukes til å importere CSS -styling fra et eksternt stilark. Denne taggen har en medieegenskap som fungerer på samme måte som en mediespørring ville gjøre i CSS.




href='tablet.css'>


Koden ovenfor skal plasseres i koden til HTML -filen. Alt du trenger å gjøre er å lage tre separate CSS -filer med filnavnene main.css, tablet.css og smartphone.css - og lag deretter den spesifikke designen du ønsker for hver enhet.

Stilen i hovedfilen gjelder for alle skjermer med en bredde større enn 800px, stilen i nettbrettfilen gjelder for alle skjermer med en bredde mellom 450px og 801px, og stilen i smarttelefonfilen gjelder for alle skjermene nedenfor 451px.

hvorfor slår ikke telefonen min på

Nå har du verktøyene til å lage responsive design

Hvis du kom til slutten av denne artikkelen, kunne du lære hva responsivt design er og hvorfor det er nyttig. Du kan nå identifisere og bruke mediespørringer i CSS- og HTML -filer. I tillegg ble du introdusert for prioritetsrekkefølgen i CSS og så hvordan det kan påvirke hvordan mediesøkene dine fungerer.

Bildekreditt: Negativ plass/ Pexels

Dele Dele kvitring E -post Hvordan sette et bakgrunnsbilde i CSS

CSS er et kraftig verktøy for styling av nettsider. Å lære å plassere et bakgrunnsbilde lærer deg mange grunnleggende CSS.

Les neste Relaterte temaer
  • Programmering
  • Webutvikling
  • Webdesign
  • CSS
Om forfatteren Kadeisha Kean(21 artikler publisert)

Kadeisha Kean er en fullstabel programvareutvikler og teknisk/teknologisk skribent. Hun har den særegne evnen til å forenkle noen av de mest komplekse teknologiske konseptene; produsere materiale som lett kan forstås av enhver nybegynner innen teknologi. Hun brenner for å skrive, utvikle interessant programvare og reise verden rundt (gjennom dokumentarer).

Mer fra Kadeisha Kean

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere