Forum Mjukvara Programmering och digitalt skapande Tråd

CSS - måttenheten em

1
Skriv svar
Permalänk
Medlem
●

CSS - måttenheten em

Jag undrar när man ska använda måttenheten em för att positionera element på sin sida. Just nu använder jag px för allt, men jag har ingen aning om det är så man bör göra, jag håller på att försöka lära mig HTML/CSS.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Har pysslat med CSS en gång, så ta följande med en nypa salt, men jag har för mig att firefox, chrome osv klarar av mått i "px" fint, medans internet explorer föredrar måtten i "em".

Det är bara att googla lite, så får du massor av nyttig information.

Visa signatur

|| Intel 8700K || MSI GTX 1080 TI Gaming X || Xonar DG || Samsung 750 EVO 500GB & Kingston A2000 1TB & Samsung 960 EVO 250GB || XFX XXX 650W || Antec P183 || Asus G-Sync RoG Swift PG279Q || Dell XPS 15 || Thinkpad X220

The Force is like Duct Tape, it has a light side, a dark side, and holds the universe together.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Om man googlar runt på em hittar man både folk som säger att em är bäst och bör användas till allt och folk som säger att man alltid ska använda px, förvirrande.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Newklear:

Har pysslat med CSS en gång, så ta följande med en nypa salt, men jag har för mig att firefox, chrome osv klarar av mått i "px" fint, medans internet explorer föredrar måtten i "em".

Det är bara att googla lite, så får du massor av nyttig information.

Gå till inlägget

Det stämmer inte, alla webbläsare har stöd för em och px och skillnaderna är i princip noll så länge de är överens om boxmodellen.

Skrivet av Murloc:

Om man googlar runt på em hittar man både folk som säger att em är bäst och bör användas till allt och folk som säger att man alltid ska använda px, förvirrande.

Gå till inlägget

Inget av alternativen är bättre än det andra, de fyller olika syften. Enheten em är alltid relativ till fontstorlek; har du angett font-size:75% och användarens grundinställning är 16 px, motsvarar en em 12px. I designer med mycket absolut layout och grafiska effekter är pixlar enklare att arbeta med av just den anledningen.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Teknocide:

Det stämmer inte, alla webbläsare har stöd för em och px och skillnaderna är i princip noll så länge de är överens om boxmodellen.

Gå till inlägget

Nej okej, det var bara nåt jag hade för mig.

Till TS: Här går dem igenom det väldigt bra: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-p...

Visa signatur

|| Intel 8700K || MSI GTX 1080 TI Gaming X || Xonar DG || Samsung 750 EVO 500GB & Kingston A2000 1TB & Samsung 960 EVO 250GB || XFX XXX 650W || Antec P183 || Asus G-Sync RoG Swift PG279Q || Dell XPS 15 || Thinkpad X220

The Force is like Duct Tape, it has a light side, a dark side, and holds the universe together.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Är det så att man bara bör använda em för att bestämma font-size eller ska man också använda em till allt annat som att t.ex. positionera divs?

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Jag har under flera år räknat med att våra webbläsare är så moderna att man kan anväda px uteslutande. Genom att använda px vet ni absolut hur olika element placerar sig och ni kan enklare använda grafik som bakgrundsbilder etc. och vara säkra på att allt kommer på rätt plats i rätt storlek.

Riktigt gamla webbläsare förstorar inte texten om den är satt i px men det borde inte vara något problem mera 2011.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Murloc:

Är det så att man bara bör använda em för att bestämma font-size eller ska man också använda em till allt annat som att t.ex. positionera divs?

Gå till inlägget

Du kan använda em överallt. På typsnitt är 1 em och 100 % samma sak så det är hugget som stucket vad man väljer att använda. Däremot erbjuder em något helt annat när det används för att sätta dimensioner och marginaler på element. Genom att ange dimensioner på följande sätt kan du garantera att bakgrunden alltid är lika stor i förhållande till texten, oavsett vad besökaren har satt för grundstorlek på typsnitt

css:
.foo { background:#cea; height:10em; margin:1em; padding:1em; width:16.18em; }

html:
<p class="foo">Rektangel shmecktangel</p>
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Teknocide:

Du kan använda em överallt. På typsnitt är 1 em och 100 % samma sak så det är hugget som stucket vad man väljer att använda. Däremot erbjuder em något helt annat när det används för att sätta dimensioner och marginaler på element. Genom att ange dimensioner på följande sätt kan du garantera att bakgrunden alltid är lika stor i förhållande till texten, oavsett vad besökaren har satt för grundstorlek på typsnitt

Gå till inlägget

Ok, men jag förstår inte riktigt vad som menas med att besökaren sätter grundstorlek på typsnitt, vad menas med det? Är det inte jag som sätter storleken på typsnitt med font-size, då har väl alla som besöker hemsida samma storlek på texten?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Murloc:

Ok, men jag förstår inte riktigt vad som menas med att besökaren sätter grundstorlek på typsnitt, vad menas med det? Är det inte jag som sätter storleken på typsnitt med font-size, då har väl alla som besöker hemsida samma storlek på texten?

Gå till inlägget

Föreställ dig att du har använt relativa enheter (procent, em) för att sätta alla fontstorlekar på en sida. Vad blir enheterna relativa till?
Visst, 100 % – standardstorlek.. men vad är standardstorlek?

I en besökares webbläsare finns grundinställningar för just detta. Firefox har dem under menyvalet Inställningar > Innehåll, och i Chrome ligger de under Alternativ > Under huven.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Teknocide:

Föreställ dig att du har använt relativa enheter (procent, em) för att sätta alla fontstorlekar på en sida. Vad blir enheterna relativa till?
Visst, 100 % – standardstorlek.. men vad är standardstorlek?

I en besökares webbläsare finns grundinställningar för just detta. Firefox har dem under menyvalet Inställningar > Innehåll, och i Chrome ligger de under Alternativ > Under huven.

Gå till inlägget

Jag förstår att webbläsaren måste utgå från en standardstorlek som kanske kan variera mellan olika webbläsare om man endast använder relativa värden. Men jag menar om man använder ett mer eller mindre absolut värde som pixlar så finns ju inte det problemet med relativitet och då borde alla ha exakt samma storlek som surfar in på min sida, eller?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Murloc:

Jag förstår att webbläsaren måste utgå från en standardstorlek som kanske kan variera mellan olika webbläsare om man endast använder relativa värden. Men jag menar om man använder ett mer eller mindre absolut värde som pixlar så finns ju inte det problemet med relativitet och då borde alla ha exakt samma storlek som surfar in på min sida, eller?

Gå till inlägget

Användare kan ha dålig syn, eller väldigt hög upplösning på skärmen; sitter man med en 27-tumsmonitor på 2560x1600 så vill man kanske förstora typsnitt för att lättare kunna läsa. Sätter du en absolut fontstorlek så tar du bort den möjligheten. Samma sak om man skulle ha en lågupplöst enhet som t ex en smartphone.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Teknocide:

Användare kan ha dålig syn, eller väldigt hög upplösning på skärmen; sitter man med en 27-tumsmonitor på 2560x1600 så vill man kanske förstora typsnitt för att lättare kunna läsa. Sätter du en absolut fontstorlek så tar du bort den möjligheten. Samma sak om man skulle ha en lågupplöst enhet som t ex en smartphone.

Gå till inlägget

+1
Om man ska se till en hemsidas användbarhet och tillgänglighet så är relativa måttenheter att föredra. (Sen lever jag inte som jag lär tyvärr. Men jag ska. Nån gång.)

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack, bra förklarat Teknocide. Men nu provade jag att sätta min standardstorlek till 30 i Firefox och jag har upptäckt att på de flesta sidor blir texten inte alls större. Då betyder de att de sidorna inte använder relativa mått?

Till de sidor som typsnittet inte blev större på tillhör: Youtube.com, Facebook.com, Apple.com och Sweclockers. Så det är ju inte små amatörsidor vi pratar om.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Murloc:

Tack, bra förklarat Teknocide. Men nu provade jag att sätta min standardstorlek till 30 i Firefox och jag har upptäckt att på de flesta sidor blir texten inte alls större. Då betyder de att de sidorna inte använder relativa mått?

Till de sidor som typsnittet inte blev större på tillhör: Youtube.com, Facebook.com, Apple.com och Sweclockers. Så det är ju inte små amatörsidor vi pratar om.

Gå till inlägget

Testa wikipedia, den brukar vara snäll.

Skickades från m.sweclockers.com

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Teknocide:

Testa wikipedia, den brukar vara snäll.

Skickades från m.sweclockers.com

Gå till inlägget

Den där "förklaringen" förstod jag dock inte.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Murloc:

Den där "förklaringen" förstod jag dock inte.

Gå till inlägget

http://en.wikipedia.org - användarvänlig

Skickades från m.sweclockers.com

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara