CSS Birim Dönüştürücü
px, rem, em ve vw arasında yapılandırılabilir temel boyut ve viewport genişliğiyle dönüştürün. Duyarlı CSS tasarımı için gerekli. Ücretsiz araç.
Eşdeğerler
Referans
CSS Birimleri Hakkında
CSS birimleri, web tarayıcılarında öğelerin boyutunu, aralığını ve konumunu kontrol eder. Doğru birimi seçmek duyarlı ve erişilebilir tasarımın anahtarıdır.
px, rem, em ve vw
px (piksel): Sabit boyut. Ekran çözünürlüğüne bağımsız, kesin konumlandırma için idealdir. rem (kök em): Kök elemanın (html) yazı tipi boyutuna göre ölçeklenir. Varsayılan tarayıcı yazı tipi boyutu 16px'dir, yani 1rem = 16px. em: Üst elemanın yazı tipi boyutuna göre ölçeklenir. İç içe kullanımda katlanabilir. vw (viewport genişliği): Tarayıcı penceresinin genişliğinin yüzdesi. 100vw = tam genişlik.
Yaygın px - rem dönüşümleri
Varsayılan tarayıcı tabanı 16px ile: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. 1440px tasarımda viewport birimleri için: 14.4px = 1vw, 72px = 5vw.
rem neden erişilebilirlik için tercih edilir?
Yazı tipi boyutları için rem kullanmak, kullanıcının tarayıcı yazı tipi boyutu tercihine saygı gösterir. Bir kullanıcı tarayıcısını varsayılan 16px yerine 20px olarak ayarladığında, rem tabanlı düzenler orantılı olarak ölçeklenirken px tabanlı düzenler sabit kalır. WCAG 1.4.4 (Metin Boyutlandırma), metnin içerik veya işlevsellik kaybı olmadan %200'e kadar büyütülebilmesini gerektirir — rem birimleri bu gereksinimi doğal olarak karşılar.
Gizlilik
Tüm dönüştürmeler %100 tarayıcınızda gerçekleşir. Sunucuya hiçbir veri gönderilmez.