Sådan bruges medieforespørgsler i HTML og CSS til at oprette responsive websteder

Sådan bruges medieforespørgsler i HTML og CSS til at oprette responsive websteder

Hvis du vil udvikle websteder/webapplikationer, er det vigtigt at vide, hvordan man opretter responsive designs for din succes.





Tidligere var oprettelsen af ​​websteder, der tilpassede sig godt til forskellige skærmstørrelser, en luksus, som webstedsejere måtte anmode om fra en udvikler. Imidlertid har stigningen i brugen af ​​smartphones og tablets nu gjort responsivt design til en nødvendighed i verden af ​​softwareudvikling.



Brug af medieforespørgsler er helt klart den bedste måde at sikre, at dit websted/webapp vises præcis, som du vil have det på hver enhed.





Forståelse af responsivt design

I en nøddeskal handler responsivt design om at bruge HTML/CSS til at oprette et websted/webapplayout, der tilpasser sig forskellige skærmstørrelser. I HTML/CSS er der et par forskellige måder at opnå lydhørhed i et webstedsdesign:

  • Brug af rem og em enheder i stedet for pixels (px)
  • Indstilling af visningsport/skala for hver webside
  • Brug af medieforespørgsler

Hvad er medieforespørgsler?

En medieforespørgsel er en funktion i CSS, der blev frigivet i CSS3 -versionen. Med introduktionen af ​​denne nye funktion får brugere af CSS muligheden for at justere visningen af ​​en webside baseret på en enheds/skærmens højde, bredde og retning (liggende eller portræt).



Læs mere: Cheat Sheet for Essential CSS3 Properties

Medieforespørgsler danner en ramme for at oprette kode én gang og bruge den flere gange i løbet af dit program. Dette virker måske ikke så nyttigt, hvis du udvikler et websted med kun tre websider, men hvis du arbejder for en virksomhed med hundredvis af forskellige websider - vil det vise sig at være en massiv tidsbesparelse.



Brug af medieforespørgsler

Der er flere forskellige ting, du skal tage højde for, når du bruger medieforespørgsler: struktur, placering, rækkevidde og sammenkædning.

Strukturen af ​​medieforespørgsler

Eksempel på en medieforespørgselsstruktur


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

Den generelle struktur for en medieforespørgsel omfatter:



  • Søgeordet @media
  • Det ikke/eneste søgeord
  • En medietype (som enten kan være skærm, udskrivning eller tale)
  • Nøgleordet og
  • Et unikt udtryk indeholdt i parentes
  • CSS -kode omsluttet af et par åbne og lukke krøllede seler.

Relaterede: Brug af CSS til at formatere dokumenter til udskrivning

Eksempel på en medieforespørgsel med det eneste søgeord


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

Eksemplet ovenfor anvender CSS -styling (specifikt en blå baggrundsfarve) til kun enhedsskærme, der har en bredde på 450px og derunder - så dybest set smartphones. Det eneste søgeord kan erstattes med det ikke -søgeord, og derefter ville CSS -styling i medieforespørgslen ovenfor kun gælde print og tale.

Men som standard gælder en generel medieforespørgsmålsdeklaration for alle tre medietyper, så det er ikke nødvendigt at angive en medietype, medmindre målet er at udelukke en eller flere af dem.

Standardeksempeleksempel


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

Placering af medieforespørgsler

En medieforespørgsel er en CSS -egenskab; det kan derfor kun bruges inden for stylingsproget. Der er tre forskellige måder at inkludere CSS i din kode; kun to af disse metoder giver imidlertid en praktisk måde at inkludere medieforespørgsler i dine programmer - intern eller ekstern CSS.

Den interne metode omfatter tilføjelse af mærket til tagget i HTML -filen og oprettelse af medieforespørgslen inden for parametrene for tagget.

Den eksterne metode indebærer at oprette en medieforespørgsel i en ekstern CSS -fil og linke den til din HTML -fil via tagget.

Omfanget af medieforespørgsler

Uanset om medieforespørgsler bruges via intern eller ekstern CSS, er der et stort aspekt af stylingsproget, der kan have en negativ indflydelse på, hvordan en medieforespørgsel fungerer. CSS har en prioritetsorden. Når du bruger en CSS -vælger eller i dette tilfælde en medieforespørgsel, tilsidesætter hver ny medieforespørgsel, der tilføjes til CSS -filen, den, der kom før.

Standardmedieforespørgselskoden, som vi har ovenfor, er målrettet mod smartphones (450px bred og under), så hvis du ville angive en anden baggrund for tablets, tror du måske, at du simpelthen kunne tilføje følgende kode til din allerede eksisterende CSS-fil.

Eksempel på tabletmedieforespørgsel


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

Det eneste problem er, at tabletterne på grund af prioritetsrækkefølgen ville have en rød baggrundsfarve, og smartphones nu også ville have en rød baggrundsfarve, fordi 450px og derunder er under 800px.

En måde at løse dette lille problem på ville være at tilføje medieforespørgslen efter tablets før dem til smartphones; sidstnævnte ville tilsidesætte den tidligere, og du ville nu have smartphones med en blå baggrundsfarve og tablets med en rød baggrundsfarve.

Der er dog en bedre måde at opnå separat styling til smartphones og tablets uden at være bekymret for prioriteringen. Dette er en funktion i medieforespørgsler kendt som områdespecifikation, hvor udvikleren kan oprette en medieforespørgsel med maksimal og minimumsbredde (intervallet).

Tabletmedieforespørgsel med rækkeviddeeksempel


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

Med eksemplet ovenfor bliver placeringen af ​​medieforespørgsler inden for et stilark irrelevant, da designet til tablets og smartphones er målrettet mod to separate breddesamlinger.

Hvis du ikke vil integrere medieforespørgsler i din CSS -kode, er der en alternativ metode, du kan bruge. Denne metode indebærer at bruge medieforespørgsler i tagget på en HTML -fil, så i stedet for at have et massivt typografiark, der indeholder stylingspræferencer for smartphones, tablets og computere - kan du bruge tre separate CSS -filer og oprette dine medieforespørgsler i tagget.

Mærket er et HTML -element, der bruges til at importere CSS -styling fra et eksternt stilark. Dette tag har en medieegenskab, der fungerer på samme måde som en medieforespørgsel i CSS.




href='tablet.css'>


Koden ovenfor skal placeres i taggen på din HTML -fil. Det eneste du skal gøre er at oprette tre separate CSS -filer med filnavnene main.css, tablet.css og smartphone.css - derefter oprette det specifikke design, du ønsker for hver enhed.

Stilen i hovedfilen gælder for alle skærme med en bredde større end 800px, stilen i tabletfilen gælder for alle skærme med en bredde mellem 450px og 801px, og stilen i smartphonefilen gælder for alle skærmbilleder herunder 451px.

hvordan man gemmer billeder fra en pdf

Nu har du værktøjerne til at oprette responsive designs

Hvis du nåede til slutningen af ​​denne artikel, kunne du lære, hvad responsivt design er, og hvorfor det er nyttigt. Du kan nu identificere og bruge medieforespørgsler i CSS- og HTML -filer. Derudover blev du introduceret til rækkefølgen i CSS og så, hvordan det kunne påvirke, hvordan dine medieforespørgsler fungerer.

Billedkredit: Negativ plads/ Pexels

Del Del Tweet E -mail Sådan indstilles et baggrundsbillede i CSS

CSS er et kraftfuldt værktøj til styling af websider. At lære at placere et baggrundsbillede lærer dig en masse grundlæggende CSS.

Læs Næste Relaterede emner
  • Programmering
  • Web-udvikling
  • Webdesign
  • CSS
Om forfatteren Kadeisha Kean(21 artikler udgivet)

Kadeisha Kean er en softwareudvikler i fuld stak og teknisk/teknologisk forfatter. Hun har den særlige evne til at forenkle nogle af de mest komplekse teknologiske begreber; producerer materiale, der let kan forstås af enhver nybegynder i teknologi. Hun brænder for at skrive, udvikle interessant software og rejse rundt i verden (gennem dokumentarfilm).

Mere fra Kadeisha Kean

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere