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
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
CSS responsive layout
By Camilla Larsen
