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

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 att veta hur man skapar responsiva mönster för din framgång.





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 emellertid 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 exakt som du vill att den ska på varje enhet.





Förstå responsiv design

I ett nötskal handlar lyhörd 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å responsivitet i en webbdesign:

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

Vad är mediefrågor?

En mediefråga är en funktion i CSS som släpptes i CSS3 -versionen. Med introduktionen av denna nya funktion får användare av CSS möjlighet att justera visningen av en webbsida baserat på en enhet/skärmhö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 under hela ditt program. Detta kanske inte verkar så bra om du utvecklar en webbplats med bara tre webbsidor, men om du arbetar för ett företag med hundratals olika webbsidor - kommer detta att visa sig vara en massiv tidsbesparing.



Använda mediefrågor

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

Strukturen för mediefrågor

Exempel på en mediefrågestruktur


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

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



  • Nyckelordet @media
  • Nyckelordet inte/enda
  • En medietyp (som kan vara antingen skärm, utskrift eller tal)
  • Nyckelordet och
  • Ett unikt uttryck 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

Exempel på en mediefråga med det enda sökordet


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

Exemplet ovan tillämpar CSS -styling (specifikt en blå bakgrundsfärg) på endast enhetsskärmar som har en bredd på 450 pixlar och mindre - så i princip smartphones. Det enda nyckelordet kan ersättas med det icke -nyckelordet och då gäller CSS -styling i mediefrågan ovan endast för utskrift och tal.

Som standard gäller dock en allmän mediefrågedeklaration för alla tre medietyper så det finns ingen anledning att ange en medietyp såvida inte målet är att utesluta en eller flera av dem.

Standard Media Query Exempel


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

Placering av mediefrågor

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

Den interna metoden inkluderar att lägga till taggen i taggen för HTML -filen och skapa mediafrågan inom taggens parametrar.

Den externa metoden innebär att du skapar en mediefråga i en extern CSS -fil och länkar den till din HTML -fil via taggen.

Utbudet av mediefrågor

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. CSS har en prioritetsordning. När du använder en CSS -väljare, eller i det här fallet en mediefråga, åsidosätter varje ny mediefråga som läggs till CSS -filen (eller har företräde framför) den som kom tidigare.

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

Exempel på surfplatta -media


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

Det enda problemet är att tabletterna skulle ha en röd bakgrundsfärg på grund av prioritetsordningen, och smartphones skulle nu också ha en röd bakgrundsfärg eftersom 450px och mindre är under 800px.

Ett sätt att lösa detta lilla problem skulle vara att lägga till mediafrågan för surfplattor före dem 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 prioriteringsordningen. Detta är en funktion i mediefrågor som kallas intervallspecifikation, där utvecklaren kan skapa en mediefråga med maximal och minsta bredd (intervallet).

Tablet Media -fråga med intervallexempel


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

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

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 du använder mediefrågor i taggen till en HTML -fil, så istället för att ha ett massivt formatmall som innehåller stylinginställningarna för smartphones, surfplattor och datorer - kan du använda tre separata CSS -filer och skapa dina mediefrågor i taggen.

Taggen är ett HTML -element som används för att importera CSS -styling från ett externt formatmall. Denna tagg har en medieegenskap som fungerar på samma sätt som en mediefråga i CSS.




href='tablet.css'>


Koden ovan bör placeras i taggen på din HTML -fil. Allt du behöver göra är 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 gäller alla skärmar med en bredd större än 800px, stilen i surfplattefilen gäller alla skärmar med en bredd mellan 450px och 801px, och stilen i smartphonefilen gäller för alla skärmar nedan 451px.

kan jag casta till xbox one

Nu har du verktygen för att skapa responsiva mönster

Om du tog dig till 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 i prioritetsordningen i CSS och såg hur det kan påverka hur dina mediefrågor fungerar.

Bildkredit: Negativt utrymme/ Pexels

Dela med sig Dela med sig Tweet E-post Så här ställer du in en bakgrundsbild i CSS

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

Läs Nästa Relaterade ämnen
  • Programmering
  • Webbutveckling
  • Webbdesign
  • CSS
Om författaren Kadeisha Kean(21 artiklar publicerade)

Kadeisha Kean är en mjukvaruutvecklare i full-stack och teknisk/teknikförfattare. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska begreppen; producerar material som lätt kan förstås av alla tekniska nybörjare. Hon brinner för att skriva, utveckla intressant programvara och resa runt i världen (genom dokumentärer).

Mer från Kadeisha Kean

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera