Responsive websider Flashcards
Hva er en responsiv webside?
En webside som kan vises på mange forskjellige innretninger og tilpasser seg forskjellige typer visninger
Hvordan håndterer vi at det er mange hundre forskjellige innretninger å designe en webside for?
Det finnes teknikker for å lage fleksibelt layout. Fluid grid, fluid image
Hva er den mest populære teknikken for å skalere bilder fleksibelt?
img { max-width: 100%; }. men IKKE støttet av IE!!
Hva gjør max-width 100% ?
hvis skjermen er for liten, gjøres bildet også mindre
Hva er Filament-gruppens løsning på å skalere bilder?
Å skalere dem ved å vise en versjon av bilder med få pixler hvis det må skaleres ned. Da tar det ikke plass heller. HTML5 kan gjøre dette:
img src=”smallRes.jpg” data-fullsrc=”largeRes.jpg”
largeRes vil vises på store skjermer (større enn 48px). smallRes på små skjermer.
Hva gjør meta-taggen for responsive websider, og hvordan er koden for dette?
meta name=”viewport” content=”width=device-width; initial-scale=1.0”
passer på å skalere bilder riktig
Hva er eksempel på en media-spørring for 480px max?
link rel=”stylesheet” type=”text/css”
media=”screen and (max-device-width: 480px)”
href=”shetland.css” /
Hva krever media-spørringer?
CSS3
Hva er best practice for responsivt design på en liten mobil?
We have best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns.
ikke nødvendigvis bare nedskalere alt.
Hva er teknikken for å svitsje mellom type menybar på mobil eller på desktop?
egen CSS for mobil hvor enkelte elementer velges vekk med display: none;
Hvilken måleenhet gjør det enklere å sette størrelsen på CSS relativt til andre elementer?
em
em representerer fontstørrelsen. Hvis browserens fontstørrelse er 16px, er 1em=16px.
hva betyr font-size: 2em hvis standard fontstørrelse i nettleseren er på 16px?
32em
hva gjør måleenheten “rem”?
Fungerer som “em”, bare at den forholder seg til hva som er satt i CSS for html-elementet. Hvis det er satt til noe annet enn 16px, er det dette som gjelder.
hva slags måleenhet egner seg for å skalere en hel side på likt?
“rem”. Da må du først sette den som gjelder for html:
html {
font-size: 16px;
}
så må du sette størrelser som “rem”
hva skjer når du bruker prosenter for height og width?
de relative parent-elementenes størrelse brukes som en referanse for prosenten
hva er problemet med padding og margin når man setter height eller width til 100 %?
da kan man få overflow på grunn av boks-modellen.
du har to bilder som er “display: inline-block”. Hvordan setter du dem ved siden av hverandre?
width: 50 %
hvordan fungerer prosentene for padding og margin?
de settes basert på % av bredden (width) for parent.
Hva skjer med margin-left på 50 %?
Marginen flyttes 50 % av parenten til høyre
hva betyr dette:
p {
min-width: 300px;
max-width: 600px;
}
p vil ikke komme under 300px, og vil ikke komme over 600px
hvordan kan du unngå at teksten blir komprimert automatisk til korte setninger?
ved å bruke min-width: xx px, så vil den aldri komprimere teksten til å gå under en viss størrelse.
hva skjer hvis du setter min-height: 1000px for p-elementet?
det betyr at du etter hver paragraf vil se et tomrom, fordi height skal være minst 1000px
hva gjør “overflow: hidden” ?
at alt som overflower vil bli skjult. Kun de delene som overflower. Altså, har du et bilde med begrenset width på 200px, vil alt over 200px bare skjules.
hvordan skjule alt som overflower?
overflow: hidden;
hva skjer når du setter “ height: auto;” ?
height vil automatisk skalere sammen med width.
gi et eksempel som er normalt på skalering av videoer
.container {
width: 50%;
height: 200px;
overflow: hidden;
}
.container img {
max-width: 100%;
height: auto;
display: block;
}
hvordan instruere et bilde til å ikke repetere? hva er default?
background-repeat: no-repeat;
repeat er default.
hva gjør følgende CSS
body {
background-image: url('#');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
et ikke-repeterende bilde sentrert
background-size cover vil skalere bildet til å passe bakgrunnen
hvordan angi auutomatisk skalering av et bakgrunnsbilde?
background-size: cover
hva gjør denne media-spørringen?
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
}
setter font-størrelsen til 12px for skjermer under 480px
definer en media-spørring som setter font-størrelsen til 12px for skjermer under 480px. Skal rett inn i CSS-koden
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
}definer en media-spørring for mellom 300 og 800px
@media only screen and (min-width: 320px) and (max-width: 480px) {
/* ruleset for 320px - 480px */
}hvordan kan følgende media-spørring skrives om på en annen måte?
@media only screen and (min-width: 320px) and (max-width: 480px) {
/* ruleset for 320px - 480px */
}
@media only screen and (min-width: 320px) {
/* ruleset for >= 320px */
}
@media only screen and (min-width: 480px) {
/* ruleset for >= 480px */
}
hvordan kan vi angi egen CSS med f.eks. høyere oppløsning for skjermer som har bedre oppløsning?
media-spørringene min-resolution og max-resolution. Eksempel:
@media only screen and (min-resolution: 300dpi) {
/* CSS for high resolution screens */
}
Hva er dpi?
dots per inch.
Hva er en lav DPI?
Tidligere windows-maskiner på 80-tallet hadde 95 DPI.
skriv en media-spørring som setter fontstørrelsen større (20px) ved lavoppløselig (under 150dpi) og få piksler.
@media only screen and (max-resolution: 150dpi) and (max-width: 480px) {
.page-description {
font-size: 20px;
}
}
Hvordan gjør du media-spørringer med OR? Gi et eksempel
kommaseparert liste.
@media only screen and (min-width: 480px), (orientation: landscape) {
/* CSS ruleset */
}
