1.6 html css responsive

1.6 HTML/CSS Responsive
HTML module 11.6 HTML/CSS Responsive

Lesdoel!
Responsive Design
@media rules / display / info over mobile use

Position basisbestand!

Position: Relative

Position: Relative
Gepositioneerd vanaf begin
van de body zoals ingesteld
in de css n.l. 16vw van begin
scherm.

Position: Relative
Gepositioneerd vanaf de positie van het element waar
het zich in bevindt.

Position: Absolute

Position: Absolute
Gepositioneerd vanaf begin
van de body het 0-punt.
De box staat nu 11vw van links
en 2vh van de top.

Position: Absolute
Gepositioneerd vanaf begin body 0-punt vanaf links maar
wel onder de tekst van blok 1

Position: Fixed

<main> element

<details> en <summary> element
Wanneer er veel dat tegelijk wordt weergegeven
kan je gebruik maken van accordions.
Normaal had je hier javascript voor nodig maar in HTLM5.
Kun je gebruik maken van het <details> element i.c.m. het
<summary> element.
Na klik op kennis

<details> en <summary> element

Nieuwe lesstof !

Waarom Responsive?
Aantal mobiele internet gebruikers!

Aantal mobiele internetters wereldwijd!

Aantal mobiele internetters in Nederland!

Responsive d.m.v. Media Query
Media query is een CSS techniek beschikbaar vanaf CSS3.
De @media regel in css geeft stijl aan blokken code
waarvan de @media conditie dit aangeeft.
Als de schermbreedte max 600px
breed is dan word het uitgevoerd.

5 groepen @media indelingen voor
het eenvoudig houden van de beschikbare
devices.

Een andere indelingen die je kunt gebruiken zijn.

Combinaties van indelingen

Voorbeeld @media

Opdracht!
Maak een webpagina m.b.v. @media queries waar
Op een telefoon alleen plaatje van een telefoon
verschijnt.
Op een tablet alleen een plaatje van een tablet
verschijnt.
Op een laptop alleen een plaatje van een laptop
verschijnt.
Je hebt hiervoor 15 minuten.

Responsive design!
De webapplicatie kan op de meerdere devices anders
zijn dan de webapplicatie voor bigscreen apparaten.
Hou wel rekening met:
• Huisstijl
• Kleuren
• Font’s
• Plaatjes
• Leesbaarheid

Responsive design!

Responsive design!
Bij het maken van een responsive webapplicatie moet je vooraf
rekening houden met de indeling van je webpagina’s.
Gebruik classes en id’s die aanpasbaar zijn aan de grootte
van de schermen.

Responsive design!
Bij coderen van een webpagina met onderscheid tussen
mobiel en groot scherm kan je ook de code ook indelen in mobile
en bigscreen.

Huiswerk !
Pas de gemaakte website over jou zelf aan voor mobile en
normaal scherm. Zorg ervoor dat de mobile site en anders
uitziet dan de webpagina voor het normale scherm.
Lever het geheel als zipfile in op teams in opdracht
HTML les 1.6.

1.6 html css responsive

More Related Content

Featured (20)

1.6 html css responsive