Måttenheter i CSS: Skillnad mellan sidversioner

Versionen från 17 juli 2015 kl. 19.13

Vi har nu tittat på ett par CSS-egenskaper som är viktiga för att kunna skapa layout, dvs width och height. Dessa används för att styra bredd och höjd på block-element. För att kunna använda oss av dessa på ett bra sätt måste vi lära oss lite om de olika måttenheter som är tillgängliga i CSS.

Observera att alla måttenheter i CSS måste följa direkt efter siffrorna, annars kommer det inte att fungera. Följande är korrekt; 80%, medan följande inte kommer att fungera 80 %. Så se upp med det!

Det finns ett enda värde som inte behöver någon efterföljande enhet och det är talet noll. Anledningen till det är förstås att 0% är det samma som 0em, som är det samma som 0px, osv...

Den första enhet som vi ska titta på är ”px”, vilket är en CSS-pixel. Definitionen för en ”px”, skiljer sig lite ifrån vad vi vana att en pixel är...

Standardpixel

Som du kanske vet är en pixel ett bildelement på skärmen. Varje pixel byggs upp av minst tre sub-pixlar, en röd, en grön och en blå. När dessa lyser i olika styrka så bildas olika färgkombinationer. Pixlarna är så små, och ligger så nära varandra, att du oftast inte kan urskilja dem med blotta ögat. Tillsammans bildar dessa pixlar det innehåll du ser på skärmen. En vanliga HD-skärm har 1920 x 1080 pixlar.

CSS-pixel eller `px`

CSS px är inte riktigt det samma som en pixel på en vanlig skärm. Då olika skärmar har olika egenskaper; de är olika stora, de har olika upplösning osv. Pga detta kan det skilja sig stort på vad en pixel är ifrån skärm till skärm. Därför har W3C valt att definiera px på så sätt att den blir mindre beroende av olika typer av hårdvara och mer likformig. Grundtanken är att det ska gå 96px på en tum. Detta stämmer dock enbart om du har ställt in din monitor korrekt. Den verkliga definitionen på en px är mer komplicerad och baseras sig på hur man ser ett bildelement på ett visst avstånd.

Rent generellt kan du utgå ifrån att px är mer eller mindre en pixel eller i alla fall att det är en rätt så liten måttenhet. På riktigt högupplösande skärmar, kan en px bestå av flera skärmpixlar. Det gör att man kan ange bråkdelen av en px.

Om du skulle använda px för att skapa en box skulle du göra något i stil med detta:

.enBox {
  width: 800px;
  height: 200px;
}

Ovanstående skulle skapa en klass vid namn enBox och allt som använder den klassen skulle presenteras som cirka 800x200 pixlar stort.

Procent

Procent är ofta en användbar måttenhet. Anger man saker i procent, är det lätt att få till en sida som ser bra ut oavsett hur stort användarens webbläsarfönster är.

När man anger procent, anger man oftast hur stort elementet ska vara i förhållande till föräldraelementet, dvs det är inte relativt till hela sidan eller hela webbläsarfönstret. Om man anger ett procentuellt värde för en teckensnittsstorlek, så kommer det vara i förhållande till hur stort teckensnittet är just där regeln används.

`em`

Den beräknade storleken på teckensnittet som används i elementet, antingen ärvd ifrån ett föräldraelement eller satt explicit för elementet i fråga. Om man anger det för en font-size-egenskap, beräknas storleken utifrån den teckenstorlek som ärvts ifrån föräldraelementet.

Man använder sig ofta av em för att skapa layouter som är skalbara till olika skärmstorlekar.

`rem`

Den beräknade storleken på teckensnittet som används i på rotelementet. Används ofta för att skapa skalbara layouter, där man vill komma åt teckenstorleken som gäller för "hela" dokumentet.

`ex`

Höjden på lilla x i fonten. Återigen används denna enhet för att skapa skalbara layouter.

`vh`

En hundradel av den synliga skärmdelens höjd.

`vw`

En hundradel av den synliga skärmdelens bredd.

Andra enheter

Det finns andra enheter, såsom t.ex. mm, cm och in. På grund av hur de är definierade är de dock inte pålitliga. Vi kan inte utgå ifrån att 1cm verkligen motsvarar en centimeter på skärmen. Det är därför lika bra att undvika dessa enheter. I alla fall så länge du designar saker som ska visas på en skärm. Om du däremot gör ett stylesheet som ska användas för utskrift är dock dessa enheter oftast korrekta och därmed användbara.

Nästa aktivitet

Att ändra bakgrund

@@ Rad 13: / Rad 13: @@
 [[CSS]] <code>[[px]]</code> är inte riktigt det samma som en [[pixel]] på en vanlig skärm. Då olika skärmar har olika egenskaper; de är olika stora, de har olika upplösning osv. Pga detta kan det skilja sig stort på vad en [[pixel]] är ifrån skärm till skärm. Därför har [[W3C]] valt att definiera <code>[[px]]</code> på så sätt att den blir mindre beroende av olika typer av hårdvara och mer likformig. Grundtanken är att det ska gå <code>96px</code> på en tum. Detta stämmer dock enbart om du har ställt in din monitor korrekt. Den verkliga definitionen på en <code>px</code> är mer komplicerad och baseras sig på hur man ser ett bildelement på ett visst avstånd.
-Rent generellt kan du utgå ifrån att <code>px</code> är mer eller mindre en pixel eller i alla fall att det är en rätt så liten måttenhet. På riktigt högupplösande skärmar, kan en [[px]] bestå av flera skärmpixlar. Det gör att man kan ange bråkdelen av en [[px]].
+Rent generellt kan du utgå ifrån att <code>[[px]]</code> är mer eller mindre en pixel eller i alla fall att det är en rätt så liten måttenhet. På riktigt högupplösande skärmar, kan en <code>[[px]]</code> bestå av flera skärmpixlar. Det gör att man kan ange bråkdelen av en <code>[[px]]</code>.
 Om du skulle använda <code>px</code> för att skapa en box skulle du göra något i stil med detta:
@@ Rad 23: / Rad 23: @@
 </syntaxhighlight>
 Ovanstående skulle skapa en klass vid namn <code>enBox</code> och allt som använder den klassen skulle presenteras som cirka 800x200 pixlar stort.
 == Procent ==
 Procent är ofta en användbar måttenhet. Anger man saker i procent, är det lätt att få till en sida som ser bra ut oavsett hur stort användarens webbläsarfönster är.