CSS Birim Dönüştürücü
⚙️ Temel Ayarlar
Varsayılan: 16px (tarayıcı varsayılanı)
em hesaplamaları için
% hesaplamaları için
🔄 Birim Dönüştürücü
Mutlak birim — ayarlardan bağımsız sabit boyut
Kök (html) yazı tipi boyutuna göre
Üst elemanın yazı tipi boyutuna göre
Üst elemanın genişliği/yazı tipi boyutuna göre
Baskı birimi: 1pt = 1/72 inç
1vw = viewport genişliğinin %1’i (varsayılan 1920px)
📊 Hızlı Dönüşüm Tablosu
| PX | REM | EM | % | PT | Yaygın Kullanım |
|---|
💡 En İyi Uygulamalar
👍 REM’i şunlar için kullanın:
- • Yazı tipi boyutları (kullanıcı tercihleriyle ölçeklenir)
- • Padding ve margin (tutarlı boşluklar)
- • Media query breakpoint’leri
- • Bileşen boyutları
👍 EM’i şunlar için kullanın:
- • Buton padding’i (fontla ölçeklenir)
- • Satır yüksekliği
- • Metne göre ikon boyutları
- • Tipografi boşlukları
👍 PX’i şunlar için kullanın:
- • Kenarlıklar (1px, 2px tam)
- • Gölgeler (box-shadow)
- • Küçük, hassas ayarlamalar
- • Sabit boyutlu resimler/ikonlar
👍 %’yi şunlar için kullanın:
- • Genişlik ve yükseklik (akışkan düzenler)
- • Responsive konteynerler
- • Grid sütunları
- • En-boy oranları
CSS Birim Dönüştürücü - px, rem, em, % Hesaplayıcı
🎨 CSS birimleri arasında dönüştürün: piksel (px), rem, em, yüzde (%), punto (pt) ve viewport birimleri (vw, vh). Responsive web tasarımı ve geliştirme için temel araç.
CSS Birim Türleri
- Mutlak birimler: px, pt, cm, mm, in - bağlamdan bağımsız sabit boyut
- Göreli birimler: rem, em, %, vw, vh - üst elemana veya viewport’a göre ölçeklenir
- Yazı tipine göre: rem, em, ch, ex - font boyutuna göre
- Viewport’a göre: vw, vh, vmin, vmax - viewport boyutlarına göre
Birim Açıklamaları
- px (piksel): 1px = 1 cihaz pikseli. Kesin ama ölçeklenmez.
- rem: Kök elementin (html) font boyutuna göre. Varsayılan 1rem = 16px.
- em: Üst elementin font boyutuna göre. İç içe yapılarda katlanabilir.
- %: Üst elementin özelliğine göre. 100% = üst elementle aynı.
- pt (punto): Baskı birimi. 1pt = 1/72 inç ≈ 1.333px.
- vw: 1vw = viewport genişliğinin %1’i. 100vw = tam genişlik.
- vh: 1vh = viewport yüksekliğinin %1’i. 100vh = tam yükseklik.
Yaygın Dönüşümler
- 1rem = 16px (varsayılan tarayıcı ayarı)
- 1em = 16px (üst element 16px ise)
- 100% = üst element boyutu
- 12pt = 16px (baskıda yaygın)
- 1vw = 19.2px (1920px viewport için)
62.5% Yöntemi
html { font-size: 62.5%; }
ayarlayarak 1rem = 10px yapabilirsiniz. Böylece hesaplar kolaylaşır: 1.6rem = 16px, 2.4rem = 24px vb.
Erişilebilirlik
- Fontlar için rem kullanın: kullanıcının tarayıcı tercihlerini dikkate alır
- Fontlarda px’den kaçının: kullanıcı ayarlarıyla ölçeklenmez
- Göreli birimler kullanın: zoom/büyütme için daha erişilebilir
- Farklı boyutlarda test edin: %200 zoom ve büyük metin ayarlarını kontrol edin
Responsive Tasarım
Media query’lerde rem kullanın: @media (min-width: 48rem)
yerine 768px. Böylece breakpoint’ler
kullanıcının font boyutu tercihleriyle ölçeklenir.
💡 Pro İpucu: Modern pratik; çoğu ölçü için rem (fontlar, boşluklar, breakpoint’ler), kenarlıklar ve ince detaylar için px, düzenler için % veya viewport birimleri kullanmaktır. em ile boşluk vermekten kaçının; beklenmedik şekilde katlanabilir.
Asted Cloud
Yorumlar (0)
Düşüncenizi paylaşın — lütfen kibar olun ve konu dışına çıkmayın.
Yorum yapmak için giriş yapın