Responsivt Design

resposivt_design

Fra begynnelsen av web og webutvikling har alle webutviklere vært opptatt av å finne måter til vise web innhold riktig og ryddig uansett enheten som brukes. Heletiden til i dag jobber webutviklere for å finne bedre løsnninger slik at innhold passer alle visuelle enheter. Så lenge de visuelle enhetene utvikler størrelsen og skjermoppløsninger på seg, er det jobb til webutviklere til å passe innholdet til de enhetene.

Forskjellige enheter — Forskjellige størrelser av skjermer

Førskjellige løsnninger

Det finnes mange forskjellige løsnninger til å få mer responsivt desig. Webutviklere har jobbet i mange år for å utvikle de løsnningene og jeg kommer til nevne noen av de viktigste.

Media Queries

Media Queries er en metode som har kommet med css3. hoved oppgave til denne metoden er å style nettside når en betingelse er oppfylt. Det betyr at en nettside kan ha en stil til større skjermer og en annen stil til mindre skjermer i samme css fil. Denne metoden har hjulpet webutviklere til å passe innholdet til mobiler,tabletter og pcer. Ved bruk av @media screen med din betingelse før css koden sier du til nettleseren å benytte den css koden når din betingelse er oppfylt.

Media Typer

Print og screen typer i css — Lag stil som passer forskjellige behover

Det er på samme måte som media queries, jobber media typer. Det er å stile en nettside som passer de forskjellige behovene til brukeren.

De relative måleenhetene

Det er viktig å gi de forskjellige elementene i nettsiden riktig størrelse og det finnes mange måleenheter som setter relativt mål til et element som for elsempel:
"em" Denne måleenheten angis i forhold til fontstørrrelsen.
"%" Denne måleenheten angis i forhold til tl foreldreelementet.
"vw" Denne måleenheten anigis til viewport(det området av nettsiden vi ser).
"vh" Denne måleenheter angis i forhold til viewport sin høyde.