Det här området förutsätter att du har koll på flexbox 💪.

Media queries låter dig anpassa din webbsida efter ett antal parametrar baserat på din användares typ av media och exempelvis webbläsarens fönsterstorlek.

Den här sidan visar dig hur du skapar en .container klass att återanvända i dina projekt. Du kan inspektera den här sidan med utvecklarverktygen (F12) för att se hur det används.

Media type

Genom att känna av skärmens typ så kan stilarna anpassas på webbplatsen. Ett vanligt användningsfall för detta är att anpassa stilen på sidan vid utskrift.

För att ta bort eventuell bakgrundsfärg och sätta kontrasten vid utskrift kan följande css användas. Du kan testa detta genom att trycka ctrl+p i webbläsaren för att komma till utskriftsläget. Den aktiveras genom att media typen är print, villkoret är sant och den efterföljande css-regeln blir aktiv.

@media print {
    body { 
        background-color: white; 
        color: black; 
    }
}

Media feature

Det kanske absolut vanligaste användningsfallet för media queries är att göra en webbsida responsiv. En responsiv webbsida ska fungera på olika skärmstorlekar och anpassa innehållet efter skärmens storlek.

Att arbeta responsivt med layouten eller mobil-first är idag ett måste eftersom webben används på väldigt många olika plattformar.

Ett exempel på media queries är den här webbplatsens container klass. Prova att ändra webbläsarfönstrets bredd.

Min- och max-width

Media-queries kan använda min- och max-width som villkor för vilka css-regler som ska gälla. Det fungerar i praktiken så att en viss uppsättning regler gäller som grund, men om villkoret (tex. min-width på webbläsarfönstret) är sant så börjar en ny uppsättning regler att gälla.

I exemplet nedan så kommer media queries arbeta med innehållets max-width. I grunden är detta satt till 20rem. Om du kopierar följande exempel behöver du antingen media regeln som finns längre ned på sidan (fortsätt läsa) eller ändra värdet för max-width.

Och söka del, icke.

Löksås ipsum groda söka blev plats denna sin bra ta gör fram hav, se strand när vidsträckt annan där både trevnadens enligt har. Kan kanske kunde kom flera tidigare genom, räv sjö stig rot själv erfarenheter, sig därmed lax ta precis. Erfarenheter det dimma där tid varit räv tiden tid precis när, se flera söka trevnadens ser dimmhöljd vi fram ordningens, häst hela själv kom olika samtidigt precis händer samtidigt.

Html-koden för exemplet ser ut som följer.

<div class="container">
    <div class="container__item">
        <figure>
            <img src="/wu-exempel/images/goh-rhy-yan-CCxWLAx0qmk-unsplash.jpg">
            <figcaption>Photo by <a href="https://unsplash.com/@gohrhyyan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Goh Rhy Yan</a> on <a href="https://unsplash.com/s/photos/onion?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
            </figcaption>
        </figure>
        <h1>Och söka del, icke.</h1>
        <p>Löksås ipsum groda söka blev plats denna sin bra ta gör fram hav, se strand när vidsträckt annan där både trevnadens enligt har. Kan kanske kunde kom flera tidigare genom, räv sjö stig rot själv erfarenheter, sig därmed lax ta precis. Erfarenheter det dimma där tid varit räv tiden tid precis när, se flera söka trevnadens ser dimmhöljd vi fram ordningens, häst hela själv kom olika samtidigt precis händer samtidigt.</p>
    </div>
</div>

Css-koden.

.container {
    display: flex;
    background-color: var(--color-light);
}
.container__item {
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    max-width: 20rem;
}
.container__item img {
    width: 100%;
    max-width: 100%;
}

Media regel, för att anpassa bredden efter en större skärm.

Det som sker är att om webbläsarfönstret är åtminstone 36rem brett så aktiveras regeln. Då ändras värdet på max-width till 36rem. Utan regeln så är max-width 20rem för alla upplösningar, men med regeln på plats så ändras max-width för elementet på alla skärmar bredare än 36rem.

@media (min-width: 36rem) {
    .container__item {
        max-width: 36rem;
    }
}

Studera även bilden i exemplet då den visar hur responsivitet kan uppnås på en bild med hjälp av width och max-width, det behövs inte ens media queries.

Font size, textens storlek skalar inte med webbläsarfönstrets storlek. Det kan i vissa fall göra så att din layout bryts, eftersom att texten inte ryms. För att arbeta med detta så kan textens storlek justeras efter skärmens storlek med hjälp av media-regler.

Följande exempel gör detta, notera att villkoret för media-regeln är omvänt.

.container__item h1 {
    font-size: 3rem;
}
@media (max-width: 36rem) {
    .container__item h1 {
        font-size: 1.6rem;
    }
}

Responsivitet

Media-regler är bara en del av detta.