Webbteknik 1

De layouter som gjordes i lab 4B är delvis responsiva. De är flexibla och storleken på rutorna i layouten anpassas efter tillgängligt utrymme i fönstrets bredd. Men för att göra en responsiv sida, kan man också behöva förändra layouten, så att den är olika utformad för olika fönsterbredd. I denna laboration ska du införa s.k. media queries, där du vid olika gränser för fönstrets bredd gör förändringar i layouten.

4C-1 - Media queries

I denna del ska du införa media queries för den layout som skapades i laboration 4B-1. Eftersom vi utgår från en layout för en stor skärm, kommer vi använda metoden "desktop first" och införa media queries för smalare och smalare fönsterbredd.

Förberedelser

• Öppna mappen L4c-1 i Visual Studio Code (VSC).
• Öppna filerna index.html och style.css i VSC och öppna sidan i Live Server.

Förändringar

De gränser som används i de media queries som införs är alltid olika beroende på layout och innehåll. Vi anpassar inte till någon speciell enhet, utan gör anpassningar som krävs av den webbsida vi har. I detta fall har vi inget speciellt innehåll, så då blir det huvudsakligen layouten som styr när det är lämpligt att införa en media query. I Följsamt designläge i Firefox kan du minska bredden, tills du tycker att rutorna i layouten blir för smala. Avläs då bredden och inför en media query för den bredden. Ta med regler för att göra önskade förändringar. Förslagsvis gör du följande förändringar i denna layout.

Första layout

Detta är den första layout som skapas med koden som redan finns i den nedladdade CSS-filen. Kontrollera i Följsamt designläge att den är flexibel så att först marginalerna blir smalare och sedan kolumnen i mitten, då fönstrets bredd blir smalare. Kolumnerna för "content1" och "content2" har fast bredd i "grid", så de blir inte smalare.

Första media query

Gör fönstret smalare i Följsamt designläge tills du tycker att kolumnen i mitten blir för smal. Notera fönsterrutans bredd och inför en media query för den bredden enligt nedanstående beskrivning.

• Rutan för "content1" placeras under "content2" och "content3".
• Höjden på "content1" ska vara 200px.
• Höjden på övriga rader ska vara som tidigare.
• Kolumnerna för "content2" och "content3" ska vara lika breda.
• Det finns nu inga marginaler.

Andra media query

Fortsätt att göra fönstret smalare i Följsamt designläge tills du hittar lämplig gräns för nästa media query, t.ex. då rubriken inte längre får plats på en rad.

• Navigeringen görs om så att raderna hamnar i en kolumn istället för en rad.
• Texten i h1 i header görs mindre.

Tredje media query

Slutligen inför du en media query för att göra om hela layouten till en kolumn.

• Alla element läggs i en kolumn.
• Rutan för "content1" ska i detta exempel fortfarande ligga under "content2" och "content3".

@media screen and (max-width: 800px) {
    body {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: min-content min-content auto 200px min-content;
        grid-template-areas:
            "nav      nav"
            "header   header"
            "content2 content3"
            "content1 content1"
            "footer   footer";
    }
}

@media screen and (max-width: 550px) {
    nav li {
        display: block;
    }
    header h1 {
        margin: 0;
        font-size: 1rem;
    }
}

@media screen and (max-width: 400px) {
    body {
        grid-template-columns: auto;
        grid-template-rows: min-content min-content auto min-content 200px min-content;
        grid-template-areas:
            "nav"
            "header"
            "content2"
            "content3"
            "content1"
            "footer";
    }
}

4C-2 - Ett exempel med innehåll

Här används den layout som skapades i laboration 4B-2. Färgerna har nu ändrats eller tagits bort på en del element och sidan har fyllts med lite innehåll. Experimentera själv med att göra sidan responsiv.

Experimentera på egen hand

• Öppna mappen L4c-2 i Visual Studio Code. I style.css finns de media queries som visades i filmen, men du kan ta bort dem och sedan skapa egna.
• Experimentera med att införa några media queries för att förändra layouten. Det behöver inte bli likadant som i filmen, utan det viktiga är att du experimenterar med att förändra layouten.
  • Bry dig inte om att förändra innehållet i nav och footer. Vi kommer titta på teknik för det i laboration 5.

Klar

Detta var den sista delen av laboration 4. Titta nu på veckans Exempel. Gå sedan vidare med att påbörja Uppgift 2.