DevBentoPx'den Em'e Dönüştürücü
Pikselleri anında em birimine dönüştürün. Ebeveyn yazı tipi boyutunu ayarlayın ve px em dönüşümünün gerçek zamanlı güncellenmesini izleyin.
Viewport ayarları
| Birim | Değer | |
|---|---|---|
| pxPixel | 16 | |
| ptPoint | 12 | |
| pcPica | 1 | |
| cmCentimeter | 0.42333333 | |
| mmMillimeter | 4.2333333 | |
| inInch | 0.16666667 | |
| remRoot em | 1 | |
| emEm | 1 | |
| vwViewport width | 1.1111111 | |
| vhViewport height | 1.7777778 | |
| vminViewport minimum | 1.7777778 | |
| vmaxViewport maximum | 1.1111111 | |
| exx-height (approx) | 2 | |
| chCharacter width (approx) | 1.6666667 |
Piksel’i Em’e Dönüştürün
Piksel değeri girerek em birimine dönüştürün. Dönüşüm, piksel değerinizi ebeveyn eleman yazı tipi boyutuna böler (varsayılan 16px). Rem’den farklı olarak em en yakın ebeveyni izler, bu da onu bir bütün olarak ölçeklenen bileşenler için ideal kılar.
Yaygın Değerler (16px Ebeveyn)
| Piksel | Em | Kullanım Alanı |
|---|---|---|
| 12px | 0.75em | Kart içi küçük yazı |
| 16px | 1em | Ebeveynle birebir |
| 24px | 1.5em | Kart başlığı |
| 32px | 2em | Hero metni |
Katlanma Tuzağı
Em ağaçta aşağı doğru çarpar. Üç iç içe 1.2em düzeyi yaprakta 1.728em üretir. Çözüm: çarpanı tek düzeyde uygulayın veya dış kaplarda rem, yaprak bileşende em kullanın.
Gerçek Dünya Örneği
16px metinli bir düğmede tasarım 12px dikey dolgu ister. 12 / 16 = 0.75em, yani padding: 0.75em düğme metni 20px olursa otomatik ölçeklenir.
Kök göreli birimler için Px’den Rem veya tüm birimler için CSS Birim Dönüştürücü.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.