Geliştirici araçları

CSS Birim Dönüştürücü

CSS ölçü birimlerini (px, em, rem, %, pt, vw, vh, cm, mm, in) temel boyut ve görünüm alanı parametreleriyle dönüştürün.

Aracı çalıştır

CSS birim dönüştürücü, web geliştirme ve arayüz tasarımında kullanılan farklı ölçü birimleri arasında hızlı ve tutarlı hesaplamalar yapmanızı sağlar. Araç; piksel (px), em, rem, yüzde (%), nokta (pt), görünüm genişliği (vw), görünüm yüksekliği (vh), santimetre (cm), milimetre (mm) ve inç (in) birimlerini destekler. Göreli birimler hesaplanırken temel yazı boyutu ile görünüm alanı genişlik ve yükseklik parametreleri doğrudan dikkate alınır. Örneğin 16 piksel değerini 16 piksellik temel boyut ile rem birimine çevirdiğinizde sonuç 1.0 rem olur. Ekran boyutuna bağlı vw veya vh dönüşümlerinde araç, belirtilen piksel çözünürlüğünü temel alarak ara piksel eşdeğerini hesaplar ve seçilen hedef birime çevirir. Tüm sayısal sonuçlar ve ara piksel değerleri dört ondalık basamağa kadar yuvarlanır. Dönüştürmek için butona tıkladığınızda sonuç panelinde dönüştürülen değer ve piksel eşdeğeri görünür. Responsive mizanpajlar hazırlarken yazı tipi boyutlarını ve düzen aralıklarını pratik biçimde denetleyebilirsiniz.

Kullanım

  1. Dönüştürmek istediğiniz sayısal değeri girin.
  2. Kaynak ölçü birimini açılır menüden seçin.
  3. Hedef ölçü birimini belirleyin.
  4. Gerekirse temel yazı boyutu ile görünüm alanı genişlik ve yükseklik değerlerini güncelleyin.
  5. Dönüştürmek için "Dönüştür" butonuna tıklayın.
  6. Sonuç panelinde hesaplanan hedef değeri ve piksel karşılığını inceleyin.

Örnekler

  • 16 piksellik bir font boyutunu 16 px temel boyut ile rem birimine dönüştürdüğünüzde sonuç 1.0 rem olur.
  • 1920 piksel genişliğindeki ekranda 960 piksel genişlik rem veya vw birimine çevrildiğinde 50 vw değerine ulaşılır.

SSS

rem ve em birimleri arasındaki temel fark nedir?

rem birimi kök öğenin (genellikle html etiketi) yazı boyutunu referans alırken, em birimi geçerli öğenin veya üst öğesinin yazı boyutuna bağlı olarak ölçeklenir.

Görünüm alanı (vw ve vh) hesaplamaları nasıl çalışır?

100 vw toplam ekran genişliğine, 100 vh ise toplam ekran yüksekliğine karşılık gelir. Araç, girdiğiniz genişlik ve yükseklik piksel değerlerini oranlayarak dönüşümü tamamlar.

Temel yazı boyutu sıfır girilirse ne olur?

Temel yazı boyutu sıfır olarak ayarlandığında em, rem veya yüzde birimlerine dönüşüm sıfır değerini verir. Bunun sebebi, bu dönüşümlerde temel yazı boyutuna bölme işlemi yapılmasıdır; sıfıra bölünme durumunda araç hesaplamayı yapamaz ve sıfır sonucu döndürür.

Bu aracı sitenize ekleyin

Aşağıdaki kodla çalışan SmartPlusLab aracını web sitenize ekleyin.