Responsiv Web Design

Vad är det?

Betyder att layouten ändras baserat på den enhet (mobil, tablet, desktop) som använder sitter på.

  • Samma HTML-element (i stor utsträckning)
  • Brytpunkter definerar i CSS med hjälp av mediaqueries

Hur? 🤔

viewport-taggen


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ett måste i din HTML.  Detta för att rätt förhållande ska visas på din mobil/desktop

Experiment: Ta bort viewportaggen och kika på hur en sida ser ut i din mobil

Regel #1

MEDIAQUERIES

Om sidan visan under/över en viss skärmbredd (i pixlar) appliceras CSS-reglerna innanför mediaqueryn.

Tips #2

body {  
  
    background: green;
}

@media (max-width: 600px) {
    body {
    
	background: yellow; 
   
    }
}

EN MEDIAQUERY

FÖRÄNDRADE REGLER OM SKÄRMBREDDEN GÅR ÖVER 600PX

Mobile-first

Desktop-first

TVÅ OLIKA STRATEGIER

ÖVNING

  1. Skapa tre boxar (valfritt innehåll) i HTML. Styla enkelt i CSS och utgå att boxarna ligger i rad. Skriv en mediaquery i CSS som gör att boxarna hamnar i en kolumn när skärmbredden är max 600px (Desktop first).
  2. Gör om 1) så att du istället har ett Mobile-first approach.

Undvik fasta dimensioner

Använd i så stor utsträckning som möjligt:

  • Relativa framför absoluta enheter (%, em, rem, vh, vw)
  • max-width/max-height
  • min-width/min-height

Tips #3

Välja rätt relativ enhet

Tips #4

  • Font-size = rem, em i vissa fall 
  • Padding och margin = em, eller rem går också
  • Bredd/Höjd = %
  • När man vill ha bredd/höjd i relation till screensize = vw/vh

Gör bilder responsiva!

Tips #5

img {
  width: 100%;
  height: auto;
}

Så att de stretchar i förhållande till sin behållare samt behåller sina proportioner

Tips #6

Design utifrån innehållet!

“Expand until it looks like shit. Time for a breakpoint!”

- Stephen hay

Tips #7

Använd moderna layout-tekniker!

  • CSS Flexbox!
  • CSS Grid

Mobile-first

  • Minst 50% surfar på mobilen
  • Behöver ofta mindre CSS-regler för mobil
  • Enklare sedan att lägga till CSS-regler för desktop än tvärtom

Mediaquery med mobile-first

/* MOBILE LAYOUT GOES HERE*/
html {
  font-size: 62.5%;  /* 10px/16px = 62.5% -> 1rem = 10px*/
}


.main {
  display: flex;
  flex-direction: column;
}


@media only screen and (min-width: 900px) {
  /* DESKTOP-LAYOUT GOES HERE*/
  html {
    font-size: 100%;
  }

  .main {
    flex-direction: row;
  }

  .main-nav {
    flex: 1;
  }

  .content {
    flex: 4;
  }

  .sidebar {
    flex: 1;
  }
}

I mediaquerien finns de förändrade stilmallsreglerna!

CSS enheter