Voorbereiding WT-2 deeltoets 1
⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻
WK10 | RESPONSIVE DESIGN
Viewport
<meta name = “viewport” content=“width=device-with” />
– De website moet zich aanpassen aan de scherm breedte van het
device. Hier dient de meta tag ‘vierport’ voor
Relatieve eenheden in CSS:
– Procenten (%)
– Em
– Rem
– VW & VH (viewport width & viewport height)
Media Queries
– Met media Queries kan een website zich aanpassen aan verschillende
kenmerken of parameters van een apparaat. (@media).
Voorbeelden:
,
, NOTE:
– Mobile fist design!
Omdat een mobile device de meeste ‘uitdagingen’ bevat; klein scherm,
beperkte bandbreedte, touch-bediening, gebruikersgedrag, etc. is het
verstandig progressive enhancement toe te passen
– Breakingpoints.
Desktop first design
– Van groot naar klein werken.
– We optimaliseren een website voor desktop en passen hem aan naar
gelang de schermbreedte afneemt.
– De complexiteit van de website neemt af (graceful degredation)
Mobile first design
– Van klein naar groot werken
– We optimaliseren een website voor mobiel en passen hem aan naar
gelang de schermbreedte toeneemt.
– De complexiteit van de website neemt toe (progressive enhancement)
⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻
WK11 | LAYOUT WITH FLEXBOX
Flexbox paraat eigenschappen (flexcontainer)
# flexcontainer {
display: flex; (of inline-flex;)
}
DOEL: Een efficiëntere manier om de ruimte tussen items in een container in te
delen, uit te lijnen en te verdelen zelfs als hun grootte onbekend en / of
⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻
WK10 | RESPONSIVE DESIGN
Viewport
<meta name = “viewport” content=“width=device-with” />
– De website moet zich aanpassen aan de scherm breedte van het
device. Hier dient de meta tag ‘vierport’ voor
Relatieve eenheden in CSS:
– Procenten (%)
– Em
– Rem
– VW & VH (viewport width & viewport height)
Media Queries
– Met media Queries kan een website zich aanpassen aan verschillende
kenmerken of parameters van een apparaat. (@media).
Voorbeelden:
,
, NOTE:
– Mobile fist design!
Omdat een mobile device de meeste ‘uitdagingen’ bevat; klein scherm,
beperkte bandbreedte, touch-bediening, gebruikersgedrag, etc. is het
verstandig progressive enhancement toe te passen
– Breakingpoints.
Desktop first design
– Van groot naar klein werken.
– We optimaliseren een website voor desktop en passen hem aan naar
gelang de schermbreedte afneemt.
– De complexiteit van de website neemt af (graceful degredation)
Mobile first design
– Van klein naar groot werken
– We optimaliseren een website voor mobiel en passen hem aan naar
gelang de schermbreedte toeneemt.
– De complexiteit van de website neemt toe (progressive enhancement)
⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻
WK11 | LAYOUT WITH FLEXBOX
Flexbox paraat eigenschappen (flexcontainer)
# flexcontainer {
display: flex; (of inline-flex;)
}
DOEL: Een efficiëntere manier om de ruimte tussen items in een container in te
delen, uit te lijnen en te verdelen zelfs als hun grootte onbekend en / of
