Responsiv webbdesign är ett sätt att bygga webbsidor där de här sidorna dynamiskt kan ändra sin layout och utseende baserat på en besökares skärmstorlek. Stora skärmar kan få en layout som passar de större skärmarna, medan mindre enheter, som mobiltelefoner, kan få samma webbplats formaterad på ett sätt som passar för den mindre skärmen. Detta tillvägagångssätt ger en bättre användarupplevelse för alla användare och det kan till och med bidra till att förbättra rankningen av sökmotorer. En viktig del av lyhörd webbdesign är CSS Media Queries.
Mediefrågor är som små villkorliga uttalanden i din webbplatss CSS-fil, så att du kan ställa in vissa CSS-regler som bara får effekt när ett visst villkor är uppfyllt - som om en skärmstorlek är över eller under vissa tröskelvärden.
Mediafrågor i åtgärd
Så hur använder du Media Queries på en webbplats? Här är ett mycket enkelt exempel:
- Du skulle börja med ett välstrukturerat HTML-dokument utan några visuella stilar (det är vad CSS är för)
- I din CSS-fil skulle du börja som du normalt gör genom att utforma sidan och ange en baslinje för hur webbplatsen ska se ut. Säg att du ville ha en fontstorlek på 16 pixlar, du kan skriva den här CSS:
kropp {font-size: 16px; }
- Nu kanske du vill öka den teckensnittstorleken för större skärmar som har gott om fastigheter att göra det. Det här är mediafrågor som springer in. Du skulle starta en Media Query så här:
@media skärm och (min bredd: 1000px) {}
- Detta är syntaxen för en Media Query. Det börjar med @media att upprätta Media Query själv. Därefter ställer du in "medietypen", som i detta fall är "skärm". Detta gäller skrivbordsskärmar, tabletter, telefoner etc. Slutligen avslutar du mediefrågan med "media-funktionen". I vårt exempel ovan är det "mitt bredd: 1000px". Det betyder att mediafrågan kommer att sparka in för skärmar med en bredd på minst 1000 pixlar bred.
- Efter dessa element i Media Query lägger du till en öppnings- och stängningskurva som liknar vad du skulle göra i någon vanlig CSS-regel.
- Det sista steget i en mediasökning är att lägga till CSS-reglerna som du vill tillämpa när detta villkor är uppfyllt. Du lägger till dessa CSS-regler mellan de krökta hängslen som utgör Media Query, så här:
@media skärm och (min bredd: 1000px) {kropp {font-size: 20px; }
- När villkoren för Media Query är uppfyllda (webbläsarfönstret är minst 1000 pixlar bredt), kommer denna CSS-stil att träda i kraft, och ändrar vår webbplatss typstorlek från de 16 pixlarna som vi ursprungligen upprättat till vårt nya värde på 20 pixlar.
Lägga till fler stilar
Du kan placera så många CSS-regler inom denna mediefråga som behövs för att justera webbplatsens visuella utseende. Om du till exempel inte bara vill öka teckensnittstorleken till 20 pixlar, men också ändra färgen på alla stycken till svart (# 000000), kan du lägga till följande:
@media skärm och (min bredd: 1000px) {kropp {font-size: 20px; } p {färg: # 000000; }}
Lägga till fler medianfrågor
Dessutom kan du lägga till fler Media Queries för alla större storlekar och lägga till dem i ditt stilark så här:
@media skärm och (min bredd: 1000px) {kropp {font-size: 20px; } p {färg: # 000000; {} @ media skärm och (min bredd: 1400px) {kropp {font-size: 24px; }}
De första Media Queries skulle sparka in vid 1000 pixlar breda och ändra teckensnittstorleken till 20 pixlar. Sedan, när webbläsaren var över 1400 pixlar, ändras teckensnittstormen igen till 24 pixlar. Du kan lägga till så många Media Queries som behövs för din specifika webbplats.
Min Bredd och Max Bredd
Det finns generellt två sätt att skriva mediafrågor - med "min bredd" eller med "maxbredd". Hittills har vi sett "min bredd" i aktion. Detta gör att mediesökningarna träder i kraft när en webbläsare har uppnått åtminstone den minsta bredden. Så en fråga som använder "min bredd: 1000px" gäller när webbläsaren är minst 1000 pixlar bred. Denna typ av Media Query används när du bygger en webbplats på ett "mobilt först" sätt.
Om du använder "max bredd" fungerar det på motsatt sätt. En mediasökning av "maxbredd: 1000px" skulle gälla när webbläsaren har fallit under denna storlek.
När det gäller äldre webbläsare
En utmaning med Media Queries är deras brist på stöd i äldre versioner av Internet Explorer. Tack och lov finns det tillgängliga polyfilter som kan patch support för Media Queries i de äldre webbläsarna, så att du kan använda dem på webbplatser idag och samtidigt se till att visningen av den webbplatsen inte ser sönder i äldre webbläsarprogram.
Redigerad av Jeremy Girard den 1/24/17
7
