Testa!
Förstora eller förminska texten manuellt i din webläsare!
Det gör du i de flesta fall genom att välja: Visa / Textstorlek.
Eller via tangentbordet: ctrl+plus / ctrl+minus (fungerar inte i Internet Explorer).
Testa också genom att dra i kanterna på webläsarfönstret!
OBS!
Standardstorleken för teckensnitt i de flesta webläsare är 16 pixlar.
Den här sidan visar teckensnittet med standard som utgångspunkt!
Det här är en bild med bredden 480 pixlar:
Här följer några boxar där bredden angetts med olika enheter:
Det här är en box med fast bredd 480px - ingen höjd angiven.
Bredden på den här boxen kommer alltid att vara 480 pixlar. Boxens bredd har ingenting med storleken på teckensnittet att göra och om man förändrar storleken på webläsar-fönstret kommer bredden att förbli densamma - precis som bredden på bilden ovan!
Eftersom boxen inte har någon bestämd höjd kommer den att anpassa sig i höjdled om man förändrar textens storlek manuellt!
Men! Om man förstorar texten VÄLDIGT mycket kommer den till slut att hamna utanför boxen även på bredden.
Det här är en box med bredden 30em - ingen höjd angiven.
Det betyder att bredden på boxen i det här fallet utgår från att 1em är 16px. Bredden på boxen blir alltså 30 x 16 = 480px - så länge man inte förändrar textstorleken i webläsaren.
Förändras textstorleken i webläsaren kommer bredden att anpassa sig proportionerligt efter textens storlek.
Eftersom boxen inte har någon bestämd höjd kommer höjden också att anpassa sig proportionerligt efter textens storlek.
Om man förändrar storleken på webläsar-fönstret kommer bredden på boxen att förbli densamma!
Det här är en box med bredden 50% - ingen höjd angiven.
Bredden på boxen utgår här från webläsarens fönsteryta och har ingenting med storleken på teckensnittet att göra.
Om man förändrar textstorleken i webläsaren kommer bredden på boxen att förbli densamma. Om man däremot förändrar storleken på fönstret (t.ex drar i kanterna) kommer bredden på boxen anpassa sig efter det.
Eftersom boxen inte har någon bestämd höjd kommer den att anpassa sig i höjdled om man förändrar storleken på fönstret eller förändrar textens storlek manuellt!
Men! Om man förstorar texten VÄLDIGT mycket eller gör fönstret VÄLDIGT litet kommer texten till slut att hamna utanför boxen även på bredden.
|
Det här är en tabell med fast bredd 480px - ingen höjd angiven. |
|
Det här är en tabell med bredden 30em - ingen höjd angiven. |
|
Det här är en tabell med bredden 50% - ingen höjd angiven. |
Här följer några exempel som illustrerar hur fel det kan bli med bestämd höjd på boxar:
Det här är en bild med bredden 480 pixlar:
Det här är en box med fast bredd 480px och fast höjd på 200px.
Boxen har blå bakgrund! Bredden på den här boxen kommer alltid att vara densamma. Men om texten tar för stor plats på höjden...
Om du använder Internet Explorer kommer du inte upptäcka att texten i själva verket hamnar utanför boxen! Det är därför det är viktigt att kolla sin sida i fler än en webläsare! Mozilla Firefox är ett bra alternativ!
Det här är en box med bredden 30em och höjden 12em.
Boxen har blå bakgrund! Bredden på boxen är densamma - så länge man inte förändrar textstorleken i webläsaren. Då kommer bredden att anpassa sig proportionerligt efter textens storlek.
Men om texten tar för stor plats på höjden...
Om du använder Internet Explorer kommer du inte upptäcka att texten i själva verket hamnar utanför boxen! Det är därför det är viktigt att kolla sin sida i fler än en webläsare! Mozilla Firefox är ett bra alternativ!
Det här är en box med bredden 50% och och fast höjd på 200px.
Boxen har blå bakgrund! Bredden på boxen utgår här från webläsarens fönsteryta och har ingenting med storleken på teckensnittet att göra.
Men om texten tar för stor plats på höjden...
Om du använder Internet Explorer kommer du inte upptäcka att texten i själva verket hamnar utanför boxen! Det är därför det är viktigt att kolla sin sida i fler än en webläsare! Mozilla Firefox är ett bra alternativ!
|
Det här är en tabell med fast bredd 480px och fast höjd på 200px. Eftersom det är en tabell kommer texten inte att hamna utanför! Tabellcellen kommer att anpassa sig efter innehållet! |
|
Det här är en tabell med bredden 30em och höjden 12em. Men om texten tar för stor plats på höjden? Eftersom det är en tabell kommer texten inte att hamna utanför! Tabellcellen kommer att anpassa sig efter innehållet! |
|
Det här är en tabell med bredden 50% och och fast höjd på 200px. Men om texten tar för stor plats på höjden? Eftersom det är en tabell kommer texten inte att hamna utanför! Tabellcellen kommer att anpassa sig efter innehållet! |