Hur man använder mediefrågor i HTML och CSS för att skapa responsiva webbplatser

Om du vill utveckla webbplatser / webbapplikationer är det viktigt för dig att veta hur man skapar lyhörd design.

Tidigare var skapandet av webbplatser som anpassade sig väl till olika skärmstorlekar en lyx som webbplatsägare var tvungna att begära av en utvecklare. Uppgången i användningen av smartphones och surfplattor har nu gjort responsiv design till en nödvändighet i världen av mjukvaruutveckling.

Att använda mediefrågor är utan tvekan det bästa sättet att se till att din webbplats / webbapp visas precis som du vill ha den på varje enhet.

Förstå responsiv design

I ett nötskal handlar responsiv design om att använda HTML / CSS för att skapa en webbplats / webbapplayout som anpassar sig till olika skärmstorlekar. I HTML / CSS finns det några olika sätt att uppnå lyhördhet i en webbdesign:

• Använda rem- och em-enheter istället för pixlar (px)
• Ställa in visningsport / skala för varje webbsida
• Använda mediefrågor

En mediefråga är en funktion i CSS som släpptes i CSS3-versionen. Med introduktionen av den här nya funktionen får användare av CSS möjligheten att justera visningen av en webbsida baserat på enhetens / skärmens höjd, bredd och orientering (liggande eller stående läge).

Läs mer: The Essential CSS3 Properties Cheat Sheet

Mediefrågor ger en ram för att skapa kod en gång och använda den flera gånger i hela ditt program. Det här kanske inte verkar så användbart om du utvecklar en webbplats med bara tre webbsidor, men om du arbetar för ett företag med hundratals olika webbsidor - detta kommer att visa sig vara en enorm tid sparare.

Det finns flera olika saker som du måste ta hänsyn till när du använder mediefrågor: struktur, placering, intervall och länkning.

@media endast / inte mediatyp och (uttryck) {
/ * CSS-kod * /
}

Den allmänna strukturen för en mediefråga inkluderar:

• Nyckelordet @media
• Det inte / enda sökordet
• En mediatyp (som kan vara antingen skärm, utskrift eller tal)
• Nyckelordet "och"
• Ett unikt uttryck inneslutet inom parentes
• CSS-kod innesluten i ett par öppna och nära lockiga hängslen.

Relaterad: Använda CSS för att formatera dokument för utskrift

@media endast skärm och (max-bredd: 450px) {
kropp{
bakgrundsfärg: blå;
}
}

Exemplet ovan tillämpar CSS-styling (särskilt en blå bakgrundsfärg) på endast enhetsskärmar som har en bredd på 450 pixlar och under - så i princip smartphones. Nyckelordet ”enda” kan ersättas med nyckelordet ”inte” och då skulle CSS-utformning i mediefrågan ovan endast gälla för utskrift och tal.

Som standard gäller dock en allmän mediefråga deklaration för alla tre mediatyperna, så det finns inget behov av att ange en medietyp om inte målet är att utesluta en eller flera av dem.

/ * design för smartphones * /
@media (max-bredd: 450px) {
kropp{
bakgrundsfärg: blå;
}
}

En mediefråga är en CSS-egenskap; den kan därför endast användas inom stylingspråket. Det finns tre olika sätt att inkludera CSS i din kod; dock är det bara två av dessa metoder som ger ett praktiskt sätt att inkludera mediefrågor i dina program - intern eller extern CSS.

Den interna metoden inkluderar att lägga till

Den externa metoden innebär att skapa en mediefråga i en extern CSS-fil och länka den till din HTML-fil via märka.

Oavsett om mediefrågor används via intern eller extern CSS, finns det en viktig aspekt av stylingspråket som kan påverka hur en mediefråga fungerar negativt. CSS har en prioritetsregel. När du använder en CSS-väljare, eller i det här fallet en mediefråga, åsidosätter (eller har företräde framför) den nya mediefrågan som läggs till i CSS-filen.

Standardmediefrågekoden som vi har ovan riktar sig mot smartphones (450 pixlar breda och under), så om du vill ställa in en olika bakgrund för surfplattor kanske du tror att du helt enkelt kan lägga till följande kod i din befintliga CSS-fil.

/ * design för surfplattor * /
@media (max-bredd: 800px) {
kropp{
bakgrundsfärg: röd;
}
}

Det enda problemet är att surfplattor på grund av prioritetens ordning skulle ha en röd bakgrundsfärg och smartphones nu också skulle ha en röd bakgrundsfärg eftersom 450px och under är under 800px.

Ett sätt att lösa detta lilla problem skulle vara att lägga till mediefrågan för surfplattor före de för smartphones; den senare skulle åsidosätta den förra och du skulle nu ha smartphones med en blå bakgrundsfärg och surfplattor med en röd bakgrundsfärg.

Det finns dock ett bättre sätt att uppnå separat styling för smartphones och surfplattor utan att vara orolig för prioritetsordningen. Detta är en funktion i mediefrågor som kallas intervallspecifikation, där utvecklaren kan skapa en mediefråga med maximal och minsta bredd (intervallet).

/ * design för surfplattor * /
@media (max-bredd: 800px) och (min-bredd: 451) {
kropp{
bakgrundsfärg: röd;
}
}

Med exemplet ovan blir placeringen av mediefrågor i ett formatmall irrelevant eftersom designen för surfplattor och smartphones riktar sig mot två separata breddessamlingar.

Om du inte vill bädda in mediefrågor i din CSS-kod finns det en alternativ metod som du kan använda. Denna metod innebär att man använder mediefrågor i tagg för en HTML-fil, så istället för att ha ett massivt formatmall som innehåller stylingspreferenser för smartphones, surfplattor och datorer - du kan använda tre separata CSS-filer och skapa dina mediefrågor i de märka.

De tag är ett HTML-element som används för att importera CSS-styling från ett externt formatmall. Den här taggen har en medieegenskap som fungerar på samma sätt som en mediefråga skulle göra i CSS.

 huvudformat 

 surfplattform 
href = "tablet.css">
 smartphone-stilblad 

Koden ovan ska placeras i

tagg för din HTML-fil. Nu är allt du behöver göra att skapa tre separata CSS-filer med filnamnen main.css, tablet.css och smartphone.css - skapa sedan den specifika design som du vill ha för varje enhet.

Stilen i huvudfilen kommer att tillämpas på alla skärmar med en bredd som är större än 800 pixlar, stilen i tablettfilen gäller till alla skärmar med en bredd mellan 450px och 801px, och stilen i smartphonefilen gäller för alla skärmar nedan 451px.

Om du gjorde det i slutet av den här artikeln kunde du lära dig vad responsiv design är och varför den är användbar. Du kan nu identifiera och använda mediefrågor i CSS- och HTML-filer. Dessutom introducerades du till prioritetsordningen i CSS och såg hur det kan påverka hur dina mediefrågor fungerar.

Bildkredit: Negativt utrymme /Pexels

Hur man ställer in en bakgrundsbild i CSS

CSS är ett kraftfullt verktyg för att utforma webbsidor. Att lära sig att placera en bakgrundsbild lär dig många CSS-grunder.

Läs Nästa

Om författaren