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 */
}
Hva bruker vi som media-spørring for å se på en ipad som bytter mellom landscape og portrait?
(orientation: landscape / portrait)
Hva er aksepterte piksel-størrelser som skiller mellom de ulike innretningene vi kan lage media-spørringer for?
mobil - mindre enn eller lik 480px tablet mindre enn eller lik 768px tablet landscape mindre enn eller lik 1024px laptop mindre enn eller lik 1600px desktop større enn 1600px
Hva er en god teknikk for å designe media-spørringer?
Å resize innholdet, og ser når det “bryter” og ser galt ut.
Hvordan kan du undersøke mediaspørringer i devtools?
trykk på prikkene, og velg “show media queries”
hvordan kan du se nlyaktig antall pixler?
trkk på prikkene i devtools, velg “show ruler”
Hvordan simulere dårlig CPU og nettverk?
bruk “throttling”. Du kan simulere 3G og 4 ganger tregere CPU enn normalt (mid tier mobile), eller 6 ganger tregere CPU enn normalt (low tier mobile)
Du kan også spesifisere eksakt hvor tregt nettverket skal gå ved å gå på “network” og velge “throttling”
krav: Et bilde skal alltid være 10 % av boksen hvor det ligger. hvordan løser du dette?
width: 100 %;
height: auto;
Hva gjør følgende:
meta name=”viewport” content=”width=device-width, initial-scale=1”
ingen horisontal scroll på siden
hva gjør box-sizing border-box?
ells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.
Hva kan man gjøre for å se hvordan siden vil oppføre seg på veldig gamle nettlesere som ikke støtter noe som helst CSS?
bruke normalize og reset-scriptene (CSS) - Reset resetter absolutt alt av design for å vise hvordan det ser ut uten
Hva er poenget med å inkludere JQuery, og hvordan gjør man det?
script src=”js/jquery.min.js”
JQuery gjør Javascript-spørringene mye penere.
hva er anbefalingene for responsive websider under seksjonen “foundation” ?
definer en viewport, inkluder stylesheet for browser-reset, sett box-sizing til border-box, inkluder JQuery
stikkord: Viewport, stylesheet, box, jquery
Hva er et breakpoint i CSS-sammenheng?
De grensetersklene med pixler hvor et element vil forandre oppførsel
Hva er “mobile first”-filosofien, og hva er tanken bak den?
At man forenkler designet - og tenker seg at alt skal fungere på mobil skjerm. Det gjør at man forholder seg kun til min-width og ikke max-width i media-spørringene. I artikkelen, fokuserer forfatteren på skillet mellom over og under 800px
h1 {
/* ment for mobil */
font-size: 1.5rem;
}
@media screen and (min-width: 800px) {
/* ment for desktop/tablet-løsninger */
h1 {
font-size: 2rem;
}
}
Hvor mange kolonner er vanlig i grid-layout?
12 kolonner (brukt av bootstrap, foundation, etc..)
Hvorfor bør du ikke bruke et fikset antall kolonner i grid-layout?
Fordi det er ikke semantisk, og det kan være vanskelig å justere på senere.
hvordan ser row-klassen ut som lar deg lage kolonner?
.row::before,
.row::after {
display: table;
content: ' ';
clear: both;
}
.one,
.one-third,
.two-thirds,
.one-fourth,
.half {
width: 100%;
}
Hvordan ser media-selektoren ut hvis man har row-klassen som er foreslått?
@media only screen and (min-width: 800px) {
.one {
width: 100%;
}
.half {
width: calc(100% / 2);
}
.one-third {
width: calc(100% / 3);
}
.one-fourth {
width: calc(100% / 4);
}
.two-thirds {
width: calc(100% / 3 * 2);
}
.column {
float: left;
}
}Hva er en flex container?
Flex containers are helpful tools for creating websites that respond to changes in screen sizes. Vi angir hvor mye noe skal øke eller minke i størrelse relatert til andre ting hvis det ikke er nok plass, eller hvis det er nok plass.
Hvordan sette opp en flex container?
div.container {
display: flex;
}
(alle diver med klasse “container”, blir satt som flex container.
hva skjer med child-elementene til en flex-container?
de vil ikke starte på ny linje. Det motsatte er display: block, hvor alt vil starte på ny linje.
hvordan få til flex inline ved siden av hverandre?
display: inline-flex
hvordan setter man justify-content, slik at flex-divene havner i midten?
justify-content: space-around
hva gjør flex-start?
setter alle flexene til venstre
hvordan tvinge flex til å gå mot høyre?
#flexend {
justify-content: flex-end;
}hvordan tvinge flex til å gå opp eller ned?
“align-items: flex-start;” eller “align-items: flex-end;”
hva i alle dager gjør flex-grow?
angir hvor mye en flex skal vokse i forhold til de andre (f.eks. flex-grow 3 tar opp plassen tilsvarende 3 stk).
hvordan angi at en flex skal krympe ved skalering?
flex-shrink: X
hvordan angi at en flex skal være 150px når den har nok plass, og øke 2 ganger de andre flexene ellers?
.center {
flex-grow: 2;
flex-basis: 150px;
}
hvordan forenkle denne?
.big {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 150px;
}
.small {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
.big {
flex: 2 1 150px;
}
.small {
flex 1 2 100px;
}
hva forteller
“flex 2 2 100px” ?
flex-grow: 2;
flex-shrink: 2;
flex-basis: 100px;
hva gjør flex-wrap?
angir når en flex skal flytte til neste linje når det brytes
hvilke tre verdier kan flex-wrap ha?
wrap, wrap-reverse, nowrap. Default wrap er “nowrap”
hvordan angi hvordan flex kan wrappes?
flex-wrap
gitt at du har et sett med knapper, hvordan kan du spesifisere at de skal wrappes?
flex-wrap: wrap
hva skjer med flex-wrap: nowrap når du gjør nettleseren mindre?
det bare krymper mer og mer. Ingenting går på ny linje.
hvis du har 5 flexer, 1,2,3,4,5. Hva skjer med 5 hvis du har flex-wrap: wrap-reverse?
5 legger seg på linjen over (ikke under) 1-4.
hvordan kan du spesifisere at en flex skal legge seg over noen andre ved mindre skjerm, og på midten?
justify-content: space-around;
flex-wrap: wrap-reverse;
hvilke to akser har flex-containere?
flex containers have two axes: a main axis and a cross axis.
hvilke flex-properties brukes for å justere hovedaksen?
justify-content
flex-wrap
flex-grow
flex-shrink
hvilke flex-properties brukes for å justere kryssaksen?
align-items
align-content
hvordan sette 5 bokser i revers?
flex-direction: row-reverse. Vil f-eks. ta boksene 1-5 og vise 5-1
hvordan angi å vise flexer som kolonner og som rader?
flex-direction: column eller flex-direction: row;
hvordan kan du sentrere en flex som har flex-direction: column?
align-items: center;
hva gjør flex-flow?
flex-flow property is used to declare both the flex-wrap and flex-direction properties in one line.
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
blir:
.container {
display: flex;
flex-flow: column wrap;
}
klassen “cards” er en liste med bilder. Hva gjør følgende CSS?
.cards {
background-color: #ffc200;
display: flex;
flex-wrap: wrap;
}
sier at bildene skal gå på neste linje hvis det blir for lite plass.
hva gjør denne
.small {
flex: 1 20px;
}
setter flex-grow til 1, og baseline til 20px
hva skjer med bredden på “box” her?
div#container {
display: flex;
}
.box {
width: 300px;
}
den kan endres hvis skjermen blir for liten
hva er forskjellen på justify-content og align-items?
align-items: aligner flex vertikalt.
justify-content: aligner horisontalt
hva er forskjellen på align-items og align-content?
align-items: align på enkelt rad
align-content: align flere rader
hva er blokk-grid?
en grid bestående av blokker som deler opp en webside. Utviklet av redaktører som fokuserte på nyhetsartikler med kolonner. Bryter opp siden i seksjoner, sånn at man får fokusert på ulikt innhold.
Hva består en grid av?
kolonner, involler (gutters) og marginer
invollene er linjene som går mellom hver kolonne.
kolonnene er de vertikale seksjonene.
marginene definerer hvor mye pusterom det skal være i ytterkanten av websiden.
Hva brukes radene til i grid-layout?
Å dele opp i forskjellige grupper.
hvor mange involler vil en 12 kolonnes grid ha?
11
hva er god praksis for invollenes bredde?
en bredde som klart separerer kolonnene, men som likevel er betydelig mindre enn hva kolonnene selv er i bredde.
hvordan er det naturlig å justere grid layout for smål enheter?
Å justere slik at det er færre kolonner (f.eks. gå fra 12 til 4).
Hva er passivt tomrom (whitespace)
mellom tekstelementer. line-height eller margin
hva er aktivt tomrom (whitespace)?
Aktivt whitespace henviser til tomrom i hele sidestrukturen som en helhet. for eksempel når vi legger til tomrom mellom seksjoner på siden.
