Responsiv

1. Responsiv webbdesign

Användare surfar på internet med enheter med olika skärmstorlek, t.ex. TV:n, dataskärmar, mobiltelefoner och surfplattor.
Hur kan webbutvecklare se till att en webbplats är snygg och läsbar på alla enheter, oavsett skärmstorlek?

Responsiv webbdesign är en webbplats förmåga att ändra storlek och organisera om innehållet baserat på:

  • Storleken på annat innehåll på webbplatsen.
  • Storleken på webbläsarfönstret.
  • Skalbara texter och bilder.
Exempel på en webbsida som är responsiv, se Boston Globe

1.1 Absoluta mått

Enheten px (pixlar), som används på webbplatser för att sätta storlekar, är ett absolut värde.
När en skärmstorlek ändras (t.ex. byter från landscape till portrait på en telefon) kan element som har en storlek satt i pixlar visas för små, flöda över skärmen eller bli helt oläslig.

1.2 Relativa mått

Relativa mått är bättre än absoluta mått, eftersom de tillåter att proportionerna på en webbplats är samma oavsett skärmstorlek eller layout.
Använd relativa mått (t.ex. em, rem och %) för att få en responsiv webbdesign.

  • Enheten em sätter textstorleken i förhållande till textstorleken för förälder-elementet.
  • Enheten rem sätter textstorleken i förhållande till textstorleken för rotelementet <html>.
    Enheten rem kan också användas för att sätta storlek på andra element som beror på textstorleken.
  • Enheten procent % används vanligtvis för att sätta storleken på värden som width, height, border, padding, margin.
    När procent % används för width och height, kommer storleken att sättas i förhållande till förälder-elementet.
    Procent % kan användas för att ställa in padding och margin. De sätts i förhållande till bredden på förälder-elementet.

Relativa måttenheter är ett första steg mot att införa responsiv design på en webbplats.

1.3 Min & max på bredd och höjd

Relativa mått är bättre än absoluta mått, eftersom de tillåter att proportionerna på en webbplats är samma oavsett skärmstorlek eller layout. Även om relativa mått ger responsiv design kan element på en webbplats bli felaktiga/fula när de blir för små eller stora, men det går att begränsa hur bred och hög ett element kan vara.
Minsta och maximala bredden på ett element kan ställas in med min-width och max-width.

  • min-width ger minsta bredden för ett element.
  • max-width ger maximala bredden för ett element.
  • min-height ger minsta höjden för ett element.
  • max-height ger maximala höjden för ett element.

2. Media queries

Relativa mått gör att sidan skalar om utseendet, men hur får vi olika utseende beroende på skärmstorlek?
Det kan vara så att sidan ska ha 3 kolumner om sidan är bredare än 991 pixlar, 2 kolumner om den är mellan 600 och 991 pixlar bred och 1 kolumn om sidan är max 600 pixlar bred.

Se hur sidan ändrar layout beroende på skärmstorlek Boston Globe

Media queries används för att ändra utseende (layout) på en sida beroende på skärmstorleken. 

<!-- Lägg till följande meta-tagg i HTML-koden --> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

/* Lägg till följande i CSS-koden */

/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) 
{

}
/* Small devices (tablets and large phones, 600px and up) */
@media screen and (min-width: 600px) and (max-width: 991px)
{
	
}
/* Large devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 992px) 
{
	
}

3. Sammanfattning

Vad behöver en webbutvecklare använda för göra för att skapa responsiva webbsidor?
- Relativa måttenheter (t.ex. %, rem, em).
- Media queries för att ändra utseende (layout) beroende på skärmstorlek.

Inga övningar

Responsiv webbdesign: En webbplats förmåga att ändra storlek och organisera om innehållet baserat på webbläsarfönstrets storlek.

em  Enhet som sätter textstorleken i förhållande till textstorleken för förälder-elementet.

rem  Enhet som sätter textstorleken i förhållande till textstorleken för rotelementet . rem kan också användas för att sätta storlek på andra element som beror på textstorleken.

%  Enhet som används för att sätta storleken på värden som width, height, border, padding och margin.

Media queries: Används i CSS för att ändra utseende på en sida beroende på skärmstorleken.

       logout    

Enkel layout som responsiv

Anpassa inlämningsuppgiften "Enkel Layout" (den med rubrik, rastergrafik, vektorgrafik, gif, jpg, png, webp, avif och footer), så att den blir responsiv.

När bredden är mindre än 1200 pixlar ska sidan visas med en kolumn, som anpassar sig efter skärmens bredd.
Tips, använd: width: och ge den ett %-värde.

Tips för inlämningsuppgiften 

<!-- Lägg in i HTML --> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* Längst ned i CSS:en */
@media screen and (max-width: 1200px) 
{
    /* När skärmen är mindre än 1200 pixlar */
}

Se tips i videon

Före du lämnar in, kolla att:
- alla filer i mappen är komprimerade (packade) till en zip-fil, som du lämnar in
- du har kommentarer i html & css
- du har indenterat html & css koden
- startsidan heter index.html
- filnamn med små bokstäver, inga mellanslag eller åäö
- bilder i <img>taggen har en beskrivande text på alt-attributet
- validera HTML
- validera CSS
- om du låter en varning från validering vara krävs en bra motivering