Om du kommit i kontakt med CSS eller kanske sett i Divi att man kan ange olika måttenheter eller kanske tom följt en tutorial där man pratar om att ange olika enhetsmått så kanske du också funderat på hur dessa måttenheter fungerar.
Så vad är egentligen skillnaden mellan px, em, vh/vw, rem och % när man anger storleken på objekt som bilder och typsnitt med hjälp av CSS?
Det ska jag försöka förklara i denna miniguide som är bra att känna till då du bygger din hemsida med utgång mobile-first, dvs att din hemsida byggs primärt för mobilanvändning (responsivt) och utifrån det anpassas även att fungera bra i desktop-läge.
När ska du använda de olika måtten?
PX (pixlar)
Pixlar är ett exakt och absolut mått som oftast används för fontstorlekar och bilder. Det ändras alltså inte oavsett skärmstorlek. Du anger måttet i CSS som t ex font-size: 18px. En bild som är 100 pixlar bred och 50 px hög är med andra ord alltid 100 pixlar bred och 50 pixlar hög. Fast det är inte riktigt sant då pixlar dessutom anpassas efter skärmens upplösning. Har man t ex en väldigt hög upplösning på skärmen kan bilden bli väldigt liten om du använder pixlar. Samma med typsnitt. Sätter du storleken till 18px för brödtexten så blir den samma både i mobil och på desktop.
% (procent)
Procent kan du använda när du vill sätta en storlek på ett objektet relativt till dess föräldrer. Dvs objekt närmast ovanför. Säg att du satt fontstorleken på brödtext på din hemsida till 18px. Om du vill att en del av texten ska skilja sig från övrig text så kanske du sätter en CSS-klass med font-size:150%. Då kommer den storleken beräknas utifrån “föräldern” som är standard fontstorleken 18px, dvs 27px (18 * 150%).
Samma om du har en box som är satt till 500px. Om du inuti denna box skapar två kolumner som använder procentfördelning, t ex width: 20% och width: 80% så kommer dessa värden att bestämmas utifrån boxen närmast ovanför, dvs 100px resp 400px i vårt exempel.
Du kan med fördel kombinera px och %. Ex sätta en bredd till 90% men max-storlek till 1200px. Detta gör du med CSS egenskapen max-width.
Du anger måtten som t ex width: 100% eller font-size: 150%;
EM
Em används främst för att sätta storleken på teckensnitt. Måttet är relativt i stort sett alltid från föräldern. Ex om standardmåttet är 18px och rubriken är satt till 2em, blir rubriken alltså 36px stor. Lite samma som när du använder %.
Du anger måtten som t ex font-size: 2em;
REM
Rem liknar måttet Em på så vis att måttet är relativt. Rem utgår dock ifrån webbsidans rot fontstorlek till skillnad från Em som utgår från sin förälder. Sätter man ingen storlek som standard utgår ofta webbläsarna från 16px. Dvs rem är då relativt till 16px fontstorlek. Om du ger din rubrik font-size: 3rem så anpassas den alltså efter rotstorleken och blir alltså 48px.
Rotstorleken anges i css som: html {font-size: 16px;}
Du anger måttet som t ex font-size: 2rem;
VH och VW
Bokstäverna står för viewport height (VH) och viewport width (VW). Dvs storleken på din webbläsares yta. 100% av den yta som du ser i din enhet. Dessa mått kan du använda när du vill relatera storleken på objektet till webbläsarens fönster. 50vw anpassar objektet till exakt hälften av din skärms yta. Ex en fullbredds sektion i Divi kanske du vill visa ut 100% bred. Sektionen anges då till bredd 100vw. Samma om du vill anpassa höjden, då använder du höjd 100vh.
Det går att använda VW för fontstorlekar också, speciellt rubriker, men kan vara lite svårt att få till. Man får testa sig fram noggrant då de är väldigt responsiva. Man bör nästan använda sk media querys för att det ska bli bra då. Och testa mycket!
Måtten anges som t ex size: 100vh eller 200vw.
Hur anger du de olika enhetsmätten?
Tänk på att alltid ange enheten direkt efter värdet, ex font-size:18px fungerar men inte font-size: 18 px. det får alltså inte vara något mellanrum mellan värdet och enheten. Anger du 0 så behöver du aldrig ange någon enhet. 0 (noll) är alltid 0.
Hängde du med?
Nu hoppas jag att du fått en liten hint om vad de olika enheterna betyder och hur de fungerar. har du frågor så kan du gärna ställa dem via Messenger, klicka på ikonen nere till höger.
Vill du förkovra dig mer om måttenheter och särskilt för Divi-temat finns annars en utförlig blogg artikel på Elegant Themes hemsida
som går mer avancerat in på hur måttenheter fungerar.
