Html les 2.3_responsive_design
of 12
/12
-
Author
mvanginkel -
Category
Education
-
view
305 -
download
0
Embed Size (px)
description
Les HTML t.b.v .1e jaar Media en Applicatieontwikkelaars
Transcript of Html les 2.3_responsive_design
Les 2.3Responsive Design
HTMLModule 2
Responsive Design
HTMLModule 2
Doel: webpagina’s responsive maken
HTMLModule 22.2 Positioneren
Responsive Design
Responsive webdesign is de aanpak die suggereert dat het ontwerp en de ontwikkeling moet reageren op het gedrag en de omgeving van de gebruiker op basis van schermgrootte, platform en oriëntatie. De praktijk bestaat uit een mix van flexibele roosters en lay-outs, afbeeldingen en een intelligent gebruik van CSS media queries. Als de gebruiker overschakelt van hun laptop naar iPad, moet de website automatisch naar geschikt voor resolutie, beeldgrootte en scripting mogelijkheden. Met andere woorden, de website de technologie om automatisch beantwoorden aan de voorkeur van de gebruiker hebben. Dit zou de noodzaak van een ander ontwerp-en ontwikkelingsfase voor elke nieuwe gadget op de markt te elimineren.
Responsive Design
HTMLModule 22.2 Positioneren
Responsive Design
De viewport Metatag
De meta-tags staan altijd in de <head> sectie.
Geeft aan viewport te gebruiken
De breedte van de content is de schermbreedte van het device
De schaal van het device = 100 procent
HTMLModule 22.2 Positioneren
Responsive Design
Scherm met breedte 960px Iphone 6
HTMLModule 22.2 Positioneren
Responsive Design
html en CSS code
Er is gebruikt gemaakt van percentages en em.Vanuit de schermbreedte van 960px en standaard font grootte.
HTMLModule 22.2 Positioneren
Responsive Design
Media Queries
HTMLModule 22.2 Positioneren
Responsive DesignMedia QueriesMedia Queries
HTMLModule 22.2 Positioneren
Responsive DesignMedia Queries
Uitgangspunt voorbeeld
Iphone 6 Schermbreedte 960
HTMLModule 22.2 Positioneren
Responsive DesignMedia QueriesVoorbeeld media query laat <aside>
alleen op schermbreedte brederdan 700px zien.
Opdracht 1HTMLModule 22.2 Positioneren
Maak de voorbeelden na, maak RAR-file met de code en schermafdrukken en upload deze naar de in de map opdracht 1 in natschool
HuiswerkBekijk alle behandelde stof en werk de opdrachten verderuit. Maak van beide opdrachten een rar file en upload deze naar Natschool in de map 2.3 Responsive doe dit binnen 4 schooldagen.
HTMLModule 22.1 Forms
