Responsive layout

Laget av Camilla Larsen

Process

1 Spørsmål om grid?

2 Introduksjon til responsive løsninger

3 Oppgaver

Flere elementer kan påvirke den responsive løsningen

Units er med på å hjelpe oss å holde siden responsiv.
%, vh og vw er responsive units
Flex og grid kan også hjelpe oss med å bygge responsive sider
Vi må også passe på at bildene våre er responsive
I tilfeller hvor dette ikke er nok, benytter vi media queries

Responsive bilder

Object-fit
Object-position

<div>
<img src="" alt="testbilde"/>
</div>

div{
	background-color: pink;
    width: 400px;
}

img{
    width: 100%;
    height: 300px;
    object-fit: initial;
    object-position: top left;
}

Media Queries

- Dette er en teknikk i CSS som hjelper oss med styling over bestemte conditions

- Media Queries lar oss bestemme CSS-properties når en condition blir oppfylt

- Er mest brukt for å gjøre nettsider responsive for flere skjermstørrelser

Hvordan bruker vi media queries?

Vi setter media queries ved å skrive @media
Vi setter deretter conditionen som må oppfylles for at den skal tas i bruk
Vi kan si at en "condition" er en betingelse

Hvordan bruker vi media queries?

"only" gjør at eldre nettlesere som ikke støtter media queries ikke benytter stylingen. Det har ingen annen funksjon i nettleseren, koden kjører uten "only" også.

Media Queries kan bruker til mye

... Men vi bruker det stort sett bare i forhold til å

gjøre siden responsiv

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_querieshttps://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Hvilke størrelser er mest brukt?

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

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Oppgave

Bruk en gammel oppgave dere har jobbet med tidligere, og gjør den responsiv ved hjelp av media quieries.
Start med mobilstørrelse, deretter Ipad størrelse.
God trening mot eksamen, da det er forventet at dere bruker responsive elementer