Differences

This shows you the differences between two versions of the page.

--- mattias_03 [2019-09-05 12:29]
Mattias Hamberg [En enkel responsiv design]
+++ mattias_03 [2019-09-06 13:17]
Mattias Hamberg [Instruktioner]
@@ Line 1: / Line 1: @@
 ====== En enkel responsiv design ======
-I en värld där man kan surfa på allt ifrån sina mobiltelefoner till gigantiska tv-apparater med 4k-upplösning är det klokt att skapa hemsidor som anpassar sig till besökarens skärm. Ett enkelt sätt är att använda enheterna vh (viewport-height) och vw (viewport-width) när du sätter höjd, bredd, marginaler och typsnittsstorlek på din sida (läs mer här: [[https://www.w3schools.com/CSSref/css_units.asp]]). I denna uppgift får du också prova CSS:s egen beräkningsfunktion calc() (läs mer på [[https://www.w3schools.com/cssref/func_calc.asp]]). Med denna kan du exempelvis addera, subtrahera, dividera dina värden. Lycka till!
+I en värld där man kan surfa på allt ifrån sina mobiltelefoner till gigantiska tv-apparater med 4k-upplösning är det klokt att skapa hemsidor som anpassar sig till besökarens skärm. Ett enkelt sätt är att använda enheterna vh (viewport-height) och vw (viewport-width) när du sätter höjd, bredd, marginaler och typsnittsstorlek på din sida (läs mer här: [[https://www.w3schools.com/CSSref/css_units.asp]]). I denna uppgift får du också prova CSS:s egen beräkningsfunktion calc() (läs mer på [[https://www.w3schools.com/cssref/func_calc.asp]]). Med denna kan du exempelvis addera, subtrahera, multiplicera och dividera dina värden. Lycka till!
 ==== Instruktioner ====
@@ Line 9: / Line 9: @@
   - Testa din sida i webbläsaren
   - Lämna in på vklass
+  - Fri lek! Kopiera "index.html" till en ny fil. Fyll den sedan med bilder, videoklipp eller annat innehåll. Men se till så att sidan hela tiden fungerar och ser bra ut oavsett skärmstorlek. Du får även ändra i "style.css" om du vill.
 ==== Anvisningar ====