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 du 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 bede om fra en udvikler. Men uptick i brugen af ​​smartphones og tablets har nu gjort responsivt design til en nødvendighed i verden af ​​softwareudvikling.

Brug af medieforespørgsler er uden tvivl den bedste måde at sikre, at dit websted / din webapp vises nøjagtigt, 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 / webapp-layout, 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

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ærmhøjde, bredde og retning (liggende eller stående tilstand).

Læs mere: Essential CSS3 Properties snydeark

Medieforespørgsler giver en ramme for oprettelse af kode en gang og brug af den flere gange i hele 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 hundreder af forskellige websider - dette vil vise sig at være en massiv tid opsparer.

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

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

Den generelle struktur for en medieforespørgsel inkluderer:

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

Relaterede: Brug af CSS til at formatere dokumenter til udskrivning

@media kun skærm og (max-bredde: 450px) {
legeme{
baggrundsfarve: blå;
}
}

Eksemplet ovenfor anvender CSS-styling (specifikt en blå baggrundsfarve) på kun enhedsskærme, der har en bredde på 450 pixel og derunder - så dybest set smartphones. Nøgleordet "kun" kan erstattes med "ikke" nøgleordet, og derefter vil CSS-styling i medieforespørgslen ovenfor kun gælde for udskrivning og tale.

Som standard gælder dog en generel medieforespørgselserklæring for alle tre medietyper, så der er ikke behov for at specificere en medietype, medmindre målet er at udelukke en eller flere af dem.

/ * design til smartphones * /
@media (maks. bredde: 450 px) {
legeme{
baggrundsfarve: blå;
}
}

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

Den interne metode inkluderer tilføjelse af

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

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

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

/ * design til tablets * /
@media (maks. bredde: 800 px) {
legeme{
baggrundsfarve: rød;
}
}

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

En måde at løse dette lille problem på ville være at tilføje medieforespørgsel til tabletter før dem til smartphones; sidstnævnte ville tilsidesætte den førstnævnte, og du ville nu have smartphones med en blå baggrundsfarve og tabletter 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 over rækkefølgen af ​​forrang. Dette er en funktion af medieforespørgsler kendt som områdespecifikation, hvor udvikleren kan oprette en medieforespørgsel med den maksimale og mindste bredde (rækkevidden).

/ * design til tablets * /
@media (maks. bredde: 800 px) og (min bredde: 451) {
legeme{
baggrundsfarve: rød;
}
}

Med eksemplet ovenfor bliver placeringen af ​​medieforespørgsler inden for et typografiark 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, som du kan bruge. Denne metode involverer brug af medieforespørgsler i tag af en HTML-fil, så i stedet for at have et massivt typografiark, der indeholder stylingpræferencer for smartphones, tablets og computere - du kan bruge tre separate CSS-filer og oprette dine medieforespørgsler i det tag.

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

 vigtigste stilark 

 tablet-stilark 
href = "tablet.css">
 smartphone-stilark 

Koden ovenfor skal placeres i

tag på din HTML-fil. Nu skal du kun oprette tre separate CSS-filer med filnavnene main.css, tablet.css og smartphone.css - derefter oprette det specifikke design, som du ønsker for hver enhed.

Stilen i hovedfilen gælder for alle skærme med en bredde, der er større end 800 pixel, stilen i tabletfilen gælder til alle skærme med en bredde mellem 450px og 801px, og stilen i smartphone-filen gælder for alle skærmbilleder nedenfor 451px

Hvis du nåede 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

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

Læs Næste

Om forfatteren