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, multiplicera och dividera dina värden. Lycka till!

Instruktioner

  1. Ladda ner denna fil: zip-fil
  2. Du ska endast skriva i CSS-filen (style.css). Du får inte röra HTML-filen (index.html).
  3. Följ anvisningarna i CSS-filen, eller de här nedanför.
  4. Testa din sida i webbläsaren
  5. Lämna in style.css på vklass
  6. 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

/*
    Ta bort alla marginaler och all utfyllnad på alla element
*/
* {}
 
/*
    Textstorleken ska räknas ut genom att 0.6em adderas med 1% av skärmens bredd.
    Radhöjden ska vara 1.6
    Typsnittsfamiljen ska vara sans-serif
*/
html {}
 
/*
    Bakgrundsbilden ska vara old_man.jpg. Bakgrundspositionen ska vara centrerad och bakgrundsstorleken ska täcka hela elementet.
    Utfyllnaden ska vara 10% av skärmens bredd.
    Höjden på elementet ska räknas ut genom att ta halva skärmens höjd och subtrahera 20% av skärmens bredd
    Textfärgen ska vara vit
*/
header {}
 
/*
    Textfärgen ska vara #266c98
*/
h2 {}
 
/*
    Utfyllnaden ska vara 10% av skärmens bredd.
*/
section {}
 
 
/*
    Marginalen ska vara 1em uppåt och nedåt men 0 åt vänster och höger
*/
p {}
 
 
/*
    Bildens bredd ska vara 100% av p-elementets bredd.
*/
img {}