Typografomvandlare
Loading tool...
I modern responsiv webbdesign är det avgörande att använda korrekta typografiska enheter för att skapa tillgängliga, flytande layouter. Medan absoluta enheter som pixlar (px) har sin plats, gynnar modern CSS kraftigt relativa enheter som Root EM (rem) och Element EM (em) så att layouter kan skalas sömlöst baserat på en användares webbläsarinställningar.
Att byta en hel stilmall från pixlar till rems kan vara matematiskt tråkigt. Eftersom 1 rem är lika med dokumentets grundteckenstorlek (vilket vanligtvis är $16$px som standard), kräver konvertering av $24$px till rems beräkning av $24 \div 16$. Men om du ändrar den grundteckenstorleken till $18$px blir all din tidigare matematik föråldrad.
Vår typografomvandlare hanterar dessa beräkningar dynamiskt. Du kan omedelbart definiera din grundteckenstorlek och fritt konvertera mellan standard CSS-enheter (px, rem, em, pt) och utskriftsspecifika enheter (in, cm, mm, picas). Oavsett om du är en teckensnittsdesigner som överför en logotyp från tryck till webb eller en frontendutvecklare som bygger om en äldre webbplats, ger detta verktyg matematiskt precisa skalbara värden omedelbart.
Hur man konverterar CSS-enheter
- 1
Ange ditt projekts grundteckenstorlek. Detta är som standard 16px, vilket är standard för Chrome, Safari och Firefox.
- 2
Ange mängden du vill konvertera (t.ex. 24).
- 3
Välj din startenhet från menyn 'Från' (t.ex. Pixlar).
- 4
Välj din målenhet från menyn 'Till' (t.ex. Root EM) och hämta det slutliga skalade värdet.
Varför använda detta verktyg?
- ✓Gör övergång av gammal CSS till moderna standarder enkel
- ✓Säkerställer perfekt tillgängliga skalningsbrytpunkter
- ✓Justerbar grundteckenstorlek för fullständig flexibilitet
- ✓Gratis och snabb utan påträngande popup-fönster
- ✓Viktigt verktyg för UI/UX-utvecklare och designers
Förstå relativa enheter
Vad är en 'rem'?
REM står för 'Root EM'. Den skalas relativt till rotens `` teckenstorlek i ett dokument. Om rotstorleken är 16px, är 2rem lika med 32px överallt på sidan.
Vad är en 'em'?
EM skalas relativt till teckenstorleken för sitt *omedelbara förälderelement*. Om en förälder `div` har en teckenstorlek på 20px, kommer ett element inuti den med `1.5em` att beräknas till 30px. Detta gör det krångligare att hantera än 'rem' men mycket kraftfullt för isolerade modulära komponenter.
Vanliga frågor
Varför ska jag inte bara använda pixlar (px) för allt?
Hårdkodade pixelvärden bryter tillgänglighetsalternativ. Om en synskadad användare ökar webbläsarens standardteckenstorlek till 24px kommer din webbplats inte att zooma korrekt om du tvingade `font-size: 16px;`. Att använda relativa enheter (`rem`) låter webbläsaren dynamiskt räkna om skalan.
Vad är en punkt (pt)?
En punkt är en fysisk måttenhet som används främst inom tryckmedia och typografiprogram som InDesign eller Word. En punkt är exakt lika med 1/72 tum. Vi konverterar detta logiskt med antagande av en 96 DPI CSS-skärmupplösning.
Spelar min grundteckenstorlek någon roll för konvertering av punkt (pt) till pixlar (px)?
Nej. Omvandlingar mellan absoluta enheter (som px, pt, cm, in) är fasta multiplikatorer och bryr sig inte om grundteckenstorleken.
Relaterade verktyg
CSS-skugggenerator
Generera visuellt CSS box-shadow-kod med anpassad oskärpa, spridning och färginställningar. Ett kreativt gratisverktyg för webbdesigners och utvecklare.
Utvecklare Verktyg
CSS-gradientgenerator
Skapa anpassade CSS linjära och radiella gradienter med ett enkelt visuellt gränssnitt. Generera perfekt kod för dina webbplatsbakgrunder gratis.
Utvecklare Verktyg
Färgomvandlare
Konvertera färgkoder mellan Hex, RGB, HSL och CMYK-format direkt. Professionellt gratis verktyg för designers att säkerställa färgkonsistens.
Utvecklare Verktyg