CSS Birim Dönüştürücü
px, rem, em, vw, vh ve diğer CSS birimleri arasında dönüştürme yapın
Ayarlar ve girdi
Hazır ayarlar ve örnekler
Tarayıcınızda çalışır. Girdileriniz bu cihazda kalır.
Sonuçlar
Sonuçları görmek için değerlerinizi girin.
Kaynak ve hesaplama ayrıntıları
Ücretsiz CSS Birim Dönüştürücü hakkında
Bu CSS Birim Dönüştürücü, web geliştiricilerinin ve tasarımcıların tüm temel CSS uzunluk birimleri arasında anında dönüşüm yapmasını sağlayan ücretsiz, kapsamlı bir araçtır. İster pikselleri rem'e, em'i yüzdeye veya görüntü alanı birimlerini mutlak ölçülere dönüştürmeniz gereksin, bu araç 10 farklı CSS biriminde aynı anda doğru, gerçek zamanlı dönüşümler sunar.
Doğru biçimde anlamak ve kullanmak üzere CSS birimlerini öğrenmek, duyarlı ve erişilebilir web siteleri oluşturmanın temelidir. rem ve em gibi göreli birimler yazı tipi boyutu ayarlarına göre ölçeklenerek düzenlerinizin kullanıcı tercihlerine ve erişilebilirlik ihtiyaçlarına uyum sağlamasını sağlar. Görüntü alanı birimleri (vw, vh), ekran boyutuna tepki veren akışkan tasarımlar oluşturur. Mutlak birimler (px, pt, cm, mm, in) ise gerektiğinde hassas kontrol için sabit ölçüler sağlar.
Bu CSS birim dönüştürme aracı, rem/em/% hesaplamaları için temel yazı tipi boyutunu özelleştirmenize ve vw/vh dönüşümleri için görüntü alanı boyutlarını ayarlamanıza olanak tanıyarak basit hesaplayıcıların ötesine geçer. 10 birimin tüm sonuçları, tek tıkla kopyalama ve anında birim değiştirme özellikleriyle anlaşılır bir ızgara düzeninde gösterilir. Böylece her tasarım bağlamı için doğru CSS değerini bulmanın en hızlı yolunu sunar.
Temel özellikler
- 10 CSS birimi arasında dönüşüm: px, rem, em, %, vw, vh, pt, cm, mm ve in
- Tüm dönüşümler duyarlı bir ızgara düzeninde aynı anda gösterilir
- Doğru rem, em ve yüzde hesaplamaları için özelleştirilebilir temel yazı tipi boyutu
- Hassas vw ve vh dönüşümleri için ayarlanabilir görüntü alanı genişliği ve yüksekliği
- Birim ekiyle birlikte tek tıkla panoya kopyalama
- Dönüştürülen herhangi bir değeri yeni kaynak yapmak için anında birim değiştirme
- 1rem, 100vw, 50% ve standart yazı tipi boyutları gibi yaygın değerler için hızlı hazır ayarlar
- Her CSS biriminin neyi temsil ettiğini gösteren birim açıklamaları
- Uygun ondalık hassasiyetle akıllı sayı biçimlendirme
- Her kodlama ortamında rahat kullanım için karanlık mod desteği
CSS Birim Dönüştürücü nasıl kullanılır?
- Bir değer girin: Dönüştürmek istediğiniz sayısal değeri aracın üst kısmındaki giriş alanına yazın.
- Kaynak birimi seçin: Girdiğiniz değerin CSS birimini açılır menüden seçin (px, rem, em, %, vw, vh, pt, cm, mm veya in).
- Gerekirse ayarları düzenleyin: Temel yazı tipi boyutunu (varsayılan 16px) ve görüntü alanı boyutlarını (varsayılan 1920x1080) projenizin yapılandırmasına göre özelleştirin.
- Tüm dönüşümleri görüntüleyin: 10 birim dönüşümünün tamamı aşağıdaki ızgarada anında gösterilir. Kolayca ayırt edilebilmesi için kaynak birim maviyle vurgulanır.
- Kopyalayın veya değiştirin: Dönüştürülen herhangi bir değeri birim ekiyle kopyalamak için kopyalama simgesine, sonraki dönüşümlerde bu değeri yeni kaynak yapmak için değiştirme simgesine tıklayın.
Kullanım alanları
- Duyarlı tasarım: Ölçeklenebilir, erişilebilir CSS düzenleri için Figma veya Sketch'teki piksel tabanlı tasarımları rem ve em birimlerine dönüştürün.
- Erişilebilirlik uyumu: Düzenlerinizin kullanıcıların yazı tipi boyutu tercihlerine ve WCAG yönergelerine uyması için sabit px değerlerinden göreli rem/em birimlerine geçin.
- Görüntü alanı tabanlı düzenler: Tam ekran bölümler, duyarlı tipografi ve akışkan boşluklar için tam vw ve vh değerlerini hesaplayın.
- Yazdırma stil sayfası oluşturma: CSS @media print stil sayfaları için ekran birimlerini yazdırmaya uygun pt, cm, mm ve in değerlerine dönüştürün.
- Tasarım sistemi geliştirme: Tasarım belirteçlerinizde birim sistemleri arasında dönüşüm yaparak tutarlı boşluk ve tipografi ölçekleri oluşturun.
- CSS çatısı geçişi: Bir CSS çatısından veya yönteminden diğerine geçerken birim sistemleri arasında dönüşüm yapın.
- Platformlar arası geliştirme: Platforma özgü birimler arasında dönüşüm yaparak web, mobil web ve hibrit uygulama geliştirmede tutarlı boyutlandırma sağlayın.
Sıkça sorulan sorular
Bu araç ücretsiz mi?
Evet, CSS Birim Dönüştürücü tamamen ücretsizdir. Kullanım sınırı yoktur, hesap gerekmez ve ücretli özellik bulunmaz. İhtiyacınız kadar değeri dönüştürün.
Verilerim güvende mi?
Kesinlikle. Tüm dönüşümler JavaScript kullanılarak tamamen tarayıcınızda hesaplanır. Hiçbir sunucuya veri gönderilmez. Sayfa yüklendikten sonra araç tamamen çevrimdışı çalışır.
Neden temel yazı tipi boyutunu ayarlamam gerekiyor?
rem, em ve % gibi göreli birimler bir referans yazı tipi boyutuna bağlıdır. Çoğu tarayıcıda varsayılan değer 16px'tir, ancak projeniz farklı bir temel boyut kullanabilir. Doğru temel yazı tipi boyutunu ayarlamak, projenizin özel yapılandırması için doğru dönüşümler sağlar.
rem ile em arasındaki fark nedir?
Hem rem hem em yazı tipi boyutuna görelidir. Ancak rem her zaman kök öğenin (html) yazı tipi boyutuna, em ise üst öğenin yazı tipi boyutuna bağlıdır. Bu dönüştürücüde belirli DOM bağlamı mevcut olmadığı için ikisi de temel yazı tipi boyutu ayarını kullanır.
Görüntü alanı birimleri nasıl hesaplanır?
1vw, görüntü alanı genişliğinin %1'ine; 1vh ise görüntü alanı yüksekliğinin %1'ine eşittir. Dönüştürücü bu değerleri hesaplamak için ayarladığınız görüntü alanı boyutlarını (varsayılan 1920x1080) kullanır. Doğru sonuçlar için ayarları hedef ekran boyutunuza göre düzenleyin.
px'ten pt'ye dönüşüm nasıl çalışır?
Dönüşüm, inç başına 96 CSS pikseli ve inç başına 72 punto olan standart oranı kullanır. Bu nedenle 1pt yaklaşık 1,333px'e (96/72) eşittir. Bu oran tüm modern tarayıcılarda ve işletim sistemlerinde aynıdır.
İpuçları ve en iyi uygulamalar
- Tipografi için rem kullanın: Temel yazı tipi boyutunu html öğesinde ayarlayın ve siteniz genelinde tutarlı, erişilebilir tipografi sağlamak için tüm metin boyutlarında rem birimlerini kullanın.
- Göreli birimleri tercih edin: Kullanıcı tercihlerine ve farklı ekran boyutlarına uyum sağlayan tasarımlar oluşturmak için boşluk ve düzenlerde rem, em ve % kullanın.
- Proje ayarlarınızı eşleştirin: Doğru sonuçlar için dönüştürücüdeki temel yazı tipi boyutunu ve görüntü alanı boyutlarını her zaman gerçek proje yapılandırmanıza göre ayarlayın.
- Görüntü alanı birimlerini ölçülü kullanın: vw ve vh akışkan düzenler için güçlü olsa da görüntü alanı boyutunun kaydırmayla değiştiği mobil tarayıcılarda sorun yaratabilir. Daha sağlam duyarlı değerler için CSS clamp() kullanmayı düşünün.
- Farklı cihazlarda test edin: Birimleri dönüştürdükten sonra değerlerin istenen görsel sonucu verdiğini doğrulamak için CSS'inizi birden fazla cihazda ve ekran boyutunda test edin.
- Yaygın dönüşümleri yer imlerine ekleyin: İş akışınızı hızlandırmak için 1rem, standart yazı tipi boyutları ve yaygın görüntü alanı hesaplamaları gibi sık gereken değerlerin hızlı hazır ayarlarını kullanın.