Hvordan bruke mediespørringer i HTML og CSS for å lage responsive nettsteder

Hvis du ønsker å utvikle nettsteder / webapplikasjoner, er det viktig å lykkes med å vite hvordan du lager responsive design.

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

Å bruke mediespørsmål er uten tvil den beste måten å sikre at nettstedet ditt / nettappen din vises nøyaktig slik du vil ha den på hver enhet.

Forstå responsiv design

I et nøtteskall handler responsiv design om å bruke HTML / CSS til å lage et nettsted / webapp-layout som tilpasser seg forskjellige skjermstørrelser. I HTML / CSS er det noen forskjellige måter å oppnå respons i et nettsteddesign:

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

Et mediespørsmål 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å enhetens / skjermens høyde, bredde og retning (liggende eller stående modus).

Les mer: The Essential CSS3 Properties Cheat Sheet

Mediespørsmål gir et rammeverk for å opprette kode en gang og bruke den flere ganger i hele 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 - dette vil vise seg å være en enorm tid sparer.

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

@media bare / ikke medietype og (uttrykk) {
/ * CSS-kode * /
}

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

• Nøkkelordet @media
• Det ikke / eneste søkeordet
• En medietype (som kan være enten skjerm, utskrift eller tale)
• Nøkkelordet “og”
• Et unikt uttrykk lukket i parentes
• CSS-kode vedlagt i et par åpne og tette krøllete bukseseler.

I slekt: Bruke CSS til å formatere dokumenter for utskrift

@media only screen and (max-width: 450px) {
kropp{
bakgrunnsfarge: blå;
}
}

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

Som standard gjelder imidlertid en generell mediespørringserklæring for alle tre medietyper, så det er ikke nødvendig å spesifisere en medietype med mindre målet er å ekskludere en eller flere av dem.

/ * design for smarttelefoner * /
@media (maks bredde: 450px) {
kropp{
bakgrunnsfarge: blå;
}
}

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

Den interne metoden inkluderer å legge til

Den eksterne metoden innebærer å lage et mediespørsmål i en ekstern CSS-fil og koble den til HTML-filen din via stikkord.

Enten mediespørsmål brukes via intern eller ekstern CSS, er det ett hovedaspekt av stylingspråket som kan påvirke hvordan et mediespørsmål fungerer negativt. CSS har en forrangsregel. Når du bruker en CSS-velger, eller i dette tilfellet et mediespørsmål, overstyrer hvert nye mediespørsmål som legges til CSS-filen det som kom før.

Standard mediespørringskode som vi har ovenfor, er målrettet mot smarttelefoner (450 px bredt og under), så hvis du vil angi en annen bakgrunn for nettbrett kan du tro at du ganske enkelt kan legge til følgende kode i den eksisterende CSS-filen.

/ * design for nettbrett * /
@media (maks bredde: 800 px) {
kropp{
bakgrunnsfarge: rød;
}
}

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

En måte å løse dette lille problemet på, er å legge til mediespørringen om nettbrett før de for smarttelefoner; sistnevnte ville overstyre førstnevnte, og du ville nå ha smarttelefoner med blå bakgrunnsfarge og nettbrett med 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 av mediespørsmål kjent som områdespesifikasjon, hvor utvikleren kan opprette et mediespørsmål med maksimum og minimum bredde (rekkevidden).

/ * design for nettbrett * /
@media (maks-bredde: 800 px) og (min bredde: 451) {
kropp{
bakgrunnsfarge: rød;
}
}

Med eksemplet ovenfor blir plassering av mediespørsmål i et stilark irrelevant ettersom designet for nettbrett og smarttelefoner retter seg mot to separate breddesamlinger.

Hvis du ikke vil legge inn mediespørsmål i CSS-koden din, er det en alternativ metode du kan bruke. Denne metoden innebærer bruk av mediespørsmål i en HTML-fil, så i stedet for å ha ett stort stilark som inneholder stylingpreferansene for smarttelefoner, nettbrett og datamaskiner - du kan bruke tre separate CSS-filer og opprette mediespørsmålene dine i de stikkord.

De tag er et HTML-element som brukes til å importere CSS-styling fra et eksternt stilark. Denne koden har en medieegenskap som fungerer på samme måte som et mediespørsmål i CSS.

 hovedstilsark 

 nettbrett stilark 
href = "tablet.css">
 smarttelefon stilark 

Koden ovenfor skal plasseres i

taggen til HTML-filen din. Nå er alt du trenger å lage tre separate CSS-filer med filnavnene main.css, tablet.css og smartphone.css — og deretter lage den spesifikke designen du vil ha for hver enhet.

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

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ørsmål i CSS- og HTML-filer. I tillegg ble du introdusert for rekkefølgen i CSS og så hvordan det kan påvirke hvordan mediespørsmålene dine fungerer.

Bildekreditt: Negativ plass /Pexels

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 om CSS.

Les Neste

Om forfatteren