Om du vill utveckla webbplatser/webbapplikationer är det viktigt att veta hur man skapar responsiva designs 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. Men 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 säkerställa att din webbplats/webbapp visas precis som du vill att den ska se ut 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/webapplayout som anpassar sig till olika skärmstorlekar. I HTML/CSS finns det några olika sätt att uppnå respons 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
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öjligheten att justera visningen av en webbsida baserat på en enhet/skärmhöjd, bredd och orientering (liggande eller stående).
Mediefrågor ger ett ramverk för att skapa kod en gång och använda den flera gånger genom hela programmet. 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 – kommer detta att visa sig vara en enorm tidsbesparing.
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.
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/endast En mediatyp (som kan vara antingen skärm, tryck eller tal) Nyckelordet “och” Ett unikt uttryck inom parentes CSS-kod omsluten av ett par öppna och stängda lockiga hängslen.
Exempel på en mediefråga med det enda nyckelordet
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}
Exemplet ovan tillämpar CSS-styling (särskilt en blå bakgrundsfärg) på endast enhetsskärmar som har en bredd på 450px och mindre – så i princip smartphones. Nyckelordet “endast” kan ersättas med nyckelordet “inte” och då skulle CSS-styling i mediefrågan ovan endast gälla tryck och tal.
Som standard gäller dock en allmän mediefrågadeklaration för alla tre medietyper, så det finns inget behov av att ange en medietyp om inte syftet är att utesluta en eller flera av dem.
Exempel på standardmediafråga
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}
En mediafrå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; 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
