Just nu i M3-nätverket
Jump to content

enheten em i css


/randis

Recommended Posts

Hej!

 

Har läst en liten tutorial om enheten em som verkar kanonbra! Om nu bara tutorialen hade visat hur man använder den :)

 

Jag fattar inte ett dugg till vilket mått em är relativt, eller hur det på ett effektivt sätt kan användas för design. När jag provade runt lite så verkade 1em i ett element vara något helt annat än 1em i nästa element. Det gör det ju omöjligt att skapa två boxar som är lika stora.

 

Någon som på ett bra sätt kan beskriva hur man använder em, och hur man kan veta hur stort det blir i slutändan.

 

Link to comment
Share on other sites

1em är en standard font storlek.

 

Poängen är att om du definerar upp storlekar med em så kan sidan skalas upp och ner utan att förlora själva designen.

 

1 em brukar vara ungefär som en standard bokstav.. Ungefär 12 pixlar verktikalt?

 

Du kan t ex göra rutor etc och veta exakt hur många bokstäver du kan få plats med inuti.

 

.minfont { font-size: 1em; } <-- standardstorlek.

.minfont2 { font-size: 0.8em; } <-- 20 % mindre än standard.

.minruta { border: 1 px solid black;

position:absolute;

left: 40em;

top: 5em;

width: 30em;

height: 5em;

} <-- ruta som ligger 40 bokstäver in och 5 från toppen och får plats

med 30 bokstäver på ledden och 5 på höjden.

 

 

Sätter jag sedan upp font storleken i webbläsaren (ctrl och + i FF) så blir 1 em större - kanske 14 pixlar på höjden, och sen 16 osv... och då följer hela designen efter.

 

 

[inlägget ändrat 2006-01-28 10:12:50 av ApaKaka]

Link to comment
Share on other sites

Hej,

 

Precis som du fått till svars här så är enheten em beroende på vilket typsnitt du använder. Em är en utskrivning av hur "m" låter, m är nämligen (nästan alltid) den bredaste bokstaven och därmed kan det vara bekvämt att räkna ut storlek beroende på hur många bokstäver du vill få plats med på bredden.

 

 

.dune.

----------------------------------------------

- "I find this a nice feature but it is not according to the documentation.

Or is it a BUG?"

- "Let´s call it an accidental feature. :-)"

 

Link to comment
Share on other sites

hmm okej...

 

body {

background-color: #555555;

font-family: tahoma;

font-size: 8px;

}

 

table {

font-size: 1em;

margin: 2em;

background-color: #ffffff

}

 

Om vi gör såhär så kommer font-sizen i table att bli 8px. Eller är det bara för att jag kör med IE som det blir så?

Jag har följande doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

 

Måste jag vara noga med att aldrig ange en textstorlek till något annat än enheten em om hela dokumentet ska vara skalbart? Framför allt när det gäller IE?

 

om vi lägger till en tredje sak

p {

font-size: 2em

margin: 2em

}

 

Kan jag då räkna med att font-sizen blir 16px?

Vad blir margin? 16px eller 32px? mao kommer den att baseras på font-sizen i <p> eller font sizen i <body> som angivits först.

 

om vi lägger in en <p> innanför en <table>. Kommer då 2em att baseras på font-size i elementet table eller i elementet body? (I detta fallet råkar de iofs vara samma, men ändå en intressant fråga.)

 

Jag kan ju testa, men det verkar ju inte som man kan lita på att IE visar rätt.

 

Link to comment
Share on other sites

Kan jag då räkna med att font-sizen blir 16px?

Vad blir margin? 16px eller 32px? mao kommer den att baseras på font-sizen i <p> eller font sizen i <body> som angivits först.

 

Grejen är att du inte ska tänka i pixlar utan relativt. En design ska inte vara beroende på hur många pixlar skärmen har eller visar just nu, utan det ska vara skalbart, vilket är varför em är bra. När du designar skalbart använder du uteslutande em för all positionering av element, breddar, höjder osv. Det är inget fel i att använda t ex 0.5em om man vill ha ett avstånd mindre än 1em.

 

 

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...