Responsiv

Hur använder man CSS för att anpassa sidans utseende till andra skärmstorlekar?

Att göra en hemsida responsiv handlar om att använda HTML och CSS för att automatiskt ändra storlek, dölja, krympa eller förstora element på hemsidan så att den ser bra ut på alla enheter (skrivbord, surfplattor och telefoner). Man brukar börja med att skriva en meta tagg i hemsidans head .
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Detta ställer in visningsområdet för din sida, som ger webbläsaren instruktioner om hur du styr sidans dimensioner och skalning. Det kommer i princip att göra att visningsområdet på sidan fyller i hela skärmen.

media

media taggen används för att inkludera ett block av CSS-egenskaper endast om ett visst villkor är sant. Vi kan gå igenom ett exempel här nedan.
@media screen and (max-width: 1000px) {
        h1 {font-size: 40px;}
}
Första raden anger att om webbläsarfönstret är 1000 pixlar eller mindre. Andra raden fungerar endast om första raden blir uppfyllt, blir det uppfyllt så ändras textstorleken på alla h1 taggar till 40px .
media taggen är alltså uppbyggt på mediatyper och mediauttryck, det finns andra mediatyper än bara screen som t.ex. all , print och speech .
@media print {
        body {
            font-size: 12pt;
        }
}
Första raden anger att när hemsidan ska bli utskriven. Andra raden fungerar endast om första raden blir uppfylld, blir det uppfyllt så ändras textstorleken på all body till 12 points vilket används av skrivare. I det här fallet så finns det ingen om-sats som utgår ifrån skärmstorleken. Därmed så kan vi se att media taggen används för olika syften. Den används främst däremot i syftet att göra en sida responsiv för andra enheter. Nedan kan du se koden som många utgår ifrån för att sedan ändra hemsidans elementstorlekar.
@media only screen and (max-width: 600px) {
            ...
}

Nu borde du ha koll på hur man använder sig utav mediataggen och kan kika på de andra avsnitten. Nästa avsnitt handlar om att validera kod och hitta fel vilket du kan gå till direkt genom att klicka här.