CSS Birim Dönüştürücü Genişlik ve yazı tipi boyutu ayarlanabilen bir görünüm ile px, em, rem, %, vw, vh, vmin ve vmax arasında dönüştürme yapın.
CSS Birim Dönüştürücü
Genişlik ve yazı tipi boyutu ayarlanabilen bir görünüm ile px, em, rem, %, vw, vh, vmin ve vmax arasında dönüştürme yapın.
Bağlamı yapılandır
Görünüm boyutlarınızı, temel yazı tipi boyutunuzu ve üst öğe boyutunuzu ayarlayın.
Bir değer girin
Dönüştürmek istediğiniz CSS değerini yazın.
Birimleri seçin
Kaynak ve hedef CSS birimlerini seçin.
What Is CSS Birim Dönüştürücü?
Bir CSS birimleri dönüştürücü, bağlam bağlı birimlere sahip olan çeşitli uzunluk birimlerini arasında çevirir. Sabit birimler (px) her zaman aynı görsel boyutu temsil eder. Göreceli birimler ise bağlama bağlıdır: em ve rem font boyutlarına, % ebeveyn öğesine ve görünüm birimleri (vw, vh, vmin, vmax) tarayıcı penceresi boyutlarına bağlıdır. Bu dönüştürücü, tüm bağlam değişkenlerini (görünüm boyutu, temel font boyutu, ebeveyn boyutu) yapılandırmanıza olanak tanır ve böylece herhangi bir CSS birimi arasında hızlı ve kesin dönüşümler yapabilirsiniz.
Why Use CSS Birim Dönüştürücü?
-
Doğru vw/vh hesaplamaları için yapılandırılabilir görünüm boyutları.
-
em/rem dönüşümleri için ayarlanabilir temel yazı tipi boyutu.
-
Yüzde hesaplamaları için üst öğe boyutu.
-
Tüm sekiz temel CSS uzunluk birimi.
-
Responsive tasarım akışı için idealdir.
Common Use Cases
Responsiv Tasarım
Sıvı tipografi ve düzenler için vw değerlerini hesaplayın.
Tasarım-Koda
Piksel tabanlı tasarım özelliklerini responsiv CSS birimlerine dönüştürün.
Erişilebilirlik
Sabit piksel boyutlarını göreli rem birimlerine dönüştürün.
Düzen Hata Ayıklama
Farklı CSS birimlerinin gerçek piksel boyutlarına nasıl çevrildiğini anlayın.
Technical Guide
CSS uzunluk birimleri iki kategoriye ayrılır:
Mutlak:
• px: CSS pikseli (CSS'de 1 inçin 1/96'sı, ancak standart ekranlarda 1 cihaz pikseli)
Göreceli:
• em: öğenin font-size'ına göre göreceli. 2em = 2× geçerli font-size
• rem: kök font-size'a (html öğesi) göre göreceli. em'den daha öngörülebilir
• %: ebeveyn öğesinin karşılık gelen özellik değerine göre göreceli
• vw: görünüm genişliğinin %1'i. 100vw = tam görünüm genişliği
• vh: görünüm yüksekliğinin %1'i. 100vh = tam görünüm yüksekliği
• vmin: daha küçük görünüm boyutunun %1'i
• vmax: daha büyük görünüm boyutunun %1'i
Sık kullanılan esnek tasarım kalıpları:
• Akışkan tipografi: font-size: clamp(1rem, 2vw + 0.5rem, 2rem)
• Tam yükseklikli bölümler: min-height: 100vh
• Esnek boşluklar: padding: 5vw
Tips & Best Practices
-
1Erişilebilirlik için yazı tipi boyutlarında rem kullanın (erişilebilirlik). Kenarlıklar ve gölgeler için px kullanın (hassasiyet).
-
2vmin, responsiv kare konteynırlar için harikadır.
-
3vw birimleri ile clamp(), medya sorguları olmadan sıvı tipografi sağlar.
-
4Mobil cihazlarda 100vh adres çubuğunu içerebilir - bunun yerine 100dvh (dinamik görünüm yüksekliği) kullanın.
-
5Şüphe duyduğunuzda, rem ve px ile başlayın. Yalnızca görünüm-bağımlı boyutlandırma ihtiyacınız olduğunda vw/vh ekleyin.
Related Tools
Uzunluk Dönüştürücü
Milimetre, santimetre, metre, kilometre, inç, ayak, yarda, mil ve deniz mili arasında anında dönüştürme yapın.
⚖️ Unit Converters
Parlaklık Dönüştürücü
Candela/m², nits, lamberts ve ayak-lamberts arasında dönüştürme yapın.
⚖️ Unit Converters
Tipografi Birim Dönüştürücü
Px, pt, em, rem, cm, mm, inç ve pika arasında yapılandırılabilir temel yazı tipi boyutu ile dönüştürme yapın.
⚖️ Unit Converters
Yoğunluk Dönüştürücü
kg/m³, g/cm³, lb/ft³, lb/in³ ve kg/L yoğunluk birimlerini birbirine dönüştürün.
⚖️ Unit ConvertersFrequently Asked Questions
Q px'i vw'ye nasıl dönüştürürüm?
Q vw ve % arasındaki fark nedir?
Q rem ile em arasında ne fark vardır?
Q vmin nedir?
Q 100vh sayfaları mobil cihazlarda kaydırma çubukları neden gösterir?
About This Tool
CSS Birim Dönüştürücü is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.