Mediafrågor

Mediefrågor är en funktion av CSS som möjliggör webbsida innehåll för att anpassa sig till olika skärmstorlekar och upplösningar. De är en grundläggande del av responsiv webbdesign och används för att anpassa utseendet på webbplatser för flera enheter.

Mediefrågor kan infogas på en webbsida html eller ingår i en separat .CSS fil som webbsidan refererar till. Nedan följer ett exempel på en enkel mediefråga:

@media skärm och (max-bredd: 768px)
{
rubrik {höjd: 70 pixlar; }
artikel {font-size: 14px; }
bild {max-bredd: 480px; }
}

Mediefrågan ovan aktiveras om en användares webbläsare fönstret är 768 pixlar bred eller mindre. Detta kan hända om du krymper fönstret på en stationär dator eller om du använder en mobil enhet, till exempel en tablett, för att visa webbsidan.

I responsiv webbdesign fungerar mediefrågor som filter för olika skärmstorlekar. Liksom alla moduler i ett kaskad stilark, åsidosätter de som visas längre ner i listan ovanför dem. Därför standard stilar definieras vanligtvis först i ett CSS-dokument, följt av mediefrågor för olika skärmstorlekar. Skrivbordsstilarna kan till exempel definieras först, följt av en mediefråga med stilar för surfplattanvändare, följt av en mediefråga som är utformad för smartphone användare. Stilar kan också definieras i motsatt ordning, vilket anses vara "mobil först" -utveckling.

Medan min-bredd är den absolut vanligaste funktionen som används i mediefrågor, många andra finns också. Exempel inkluderar min-enhetens bredd, min-enhetshöjd, sidförhållande, max-färg-index, maxupplösning, orienteringoch upplösning. Den upplösning värde kan till exempel användas för att detektera HiDPI-skärmar (t.ex. näthinnan visas) och ladda högupplöst grafik istället för standardbilder.