För att implementera responsiv webbdesign är det viktigt att förstå mediefrågor i CSS, särskilt media only och media screen-frågor.

låt oss börja med den uppenbara frågan.

vad är en mediefråga?

en mediefråga är en teknik som introducerades i CSS3. Frågan innebär att du använder @media-regeln för att köra ett block med CSS-egenskaper om ett förutbestämt villkor är sant.

koden nedan dikterar till exempel att om webbläsarfönstret är 400px eller mindre, kommer bakgrundsfärgen att vara ljusgrön:

@media only screen och (max bredd: 400px) {
body {
Background-color: lightgreen;
}
}

mediefrågor är särskilt användbara med att lägga till brytpunkter för responsiv design. Eftersom brytpunkter i huvudsak är pixelnummer där innehåll eller design visas annorlunda för användarna, används mediefrågor för att definiera vilka förändringar som måste ske vid vilka pixlar.

i exemplet nedan styr koden att om webbläsarfönstret reduceras under 600px, ska varje kolumnbredd bli 100%:

/* För skrivbord: */
.Kol-1 {bredd: 8,33%;}
.kol – 2 {bredd: 16,66%;}
.Kol-3 {bredd: 25%;}
.kol-4 {bredd: 33,33%;}
.kol-5 {bredd: 41,66%;}
.kol-6 {Bredd: 50%;}
.kol-7 {bredd: 58,33%;}
.kol-8 {bredd: 66,66%;}
.kol-9 {bredd: 75%;}
.kol-10 {bredd: 83,33%;}
.kol – 11 {bredd: 91,66%;}
.col-12 {Bredd: 100%;}

@media endast skärm och (max-bredd: 600px) {
/ * för mobiltelefoner: * /
{
Bredd: 100%;
}
}

varje mediefråga består av en valfri mediatyp och ett eller flera mediefunktionsuttryck. Det är möjligt att kombinera flera mediefrågor med logiska operatörer. Alla mediefrågor är skiftlägeskänsliga.

varje mediefråga anses vara sann när den angivna mediatypen matchar de enheter som webbplatsen visas på. Dessutom måste mediefunktionsuttrycken också vara sanna.

vad är media-skärmfrågan?

@media screen query betyder helt enkelt att frågan i fråga är avsedd för färgskärmar eller enheter som stöder ett ”skärm” – läge.

Låt oss ta ett exempel:

@media screen och (max bredd:500px)

ovanstående fråga gäller skärmar med en maximal bredd på 500 pixlar. Poängen med detta är främst att rikta koden för att skilja mellan ’skärm’ och andra mediatyper (som tryck, punktskrift, präglad, handhållen etc.).

vad är den enda mediefrågan?

genom att lägga till den logiska operatören ’only’ i mediefrågan säkerställer utvecklaren att frågan endast tillämpas om hela villkoret matchar. Om du inte använder bara, äldre webbläsare kanske inte läsa eller tolka alla media feature uttryck. Till exempel, om frågan är

@media screen och (max bredd:500px)

äldre webbläsare kan tolka frågan som bara skärm och ignorera pixelantalet. Detta skulle leda till tillämpning av frågevillkoren på alla skärmar. För att förhindra detta kan du använda:

@media only screen och (max bredd:500px)

När du använder den enda operatören, var noga med att ange mediatypen.

betydelse i responsiv design

mediefrågor är avgörande för att implementera responsiv webbdesign. Frågorna som diskuteras ovan är två av de vanligaste och är till hjälp för att säkerställa att ditt webbplatsinnehåll är optimerat för enhetsstorlekar och typer.

När du har använt CSS-frågor på din webbplats, var noga med att verifiera deras effektivitet. Det enklaste sättet att göra detta är att använda ett verktyg som låter dig testa din webbdesign på riktiga enheter och webbläsare. Det finns flera verktyg för att underlätta detta, men ta dig tid att hitta en responsiv checker online som ger dig möjlighet att testa på ett tillräckligt stort antal enheter — både skrivbord och mobil.