İçeriğe atla

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

CSS birimlerini kök yazı tipi boyutu, EM referans yazı tipi boyutu, görünüm alanı ve yüzde referansı ayarlarını kullanarak yerel olarak px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm, q, ex ve ch arasında bire bir dönüştürün. Mutlak CSS birimleri sabit 1in = 96px oranını kullanır.

px
Birimleri değiştirmek için dokunun

Uzunluk birimleri

Tipografi

Görünüm alanı

Yüzde

rem
Birimleri değiştirmek için dokunun

Uzunluk birimleri

Tipografi

Görünüm alanı

Yüzde

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

Hızlı başlangıç

1
Değer girin ve Kaynak birimi seçin
2
Hedef birimi seçin veya tersine çevirmek için Değiştir’i kullanın
3
Kök/EM referansı/%/viewport bağlamını gerektiğinde ayarlayın; EM için özelliğin gerçek yazı boyutunu kullanın.
4
Dönüştürülen sonucu kopyalayın
5
vw/vh kontrolü için viewport hazır ayarlarını değiştirin

Yaygın kullanım senaryoları

Kullanım alanları

duyarlı yerleşimler, tasarımdan geliştiriciye geçiş, farklı yoğunluk/baskı korelasyonu, birleşik stil kuralları.

Kullanım tavsiyeleri

Temel belirleyin: 16px kök yaygındır; rem ↔ px zihinden hesaplamayı kolaylaştırır.
Metin için rem tercih edin: küresel ölçekleme ve erişilebilirliği sağlar; bileşen içi ölçekleme için em kullanın.
Düzen tahminleri için görünüm birimlerini kullanın: aşırı uçlardan kaçınmak için kesme noktaları ve minimum/maksimum kısıtlamalarla birleştirin
Ondalıklar ve yuvarlama: okunması zor sayılardan kaçınmak için makul bir hassasiyet koruyun.

Parametreler ve bağlam

REM temeli (Root Font Size): rem ↔ px dönüşümünü belirler. Web’de 16px yaygındır ve (1rem≈16px) zihinden hesaplamayı kolaylaştırır; tasarım 16px’e dayanmıyorsa bunu geçici olarak değiştirin.
EM referans yazı tipi boyutu: özelliğin fiilen kullandığı yazı tipi boyutunu girin. em genellikle geçerli öğenin hesaplanan yazı tipi boyutunu kullanır; font-size ve benzeri yazı tipine göre özelliklerde ana öğenin yazı tipi boyutunu kullanın. Bu referans ayrıca ex/ch tahminleri ve Yazı tipi boyutu seçildiğinde % için kullanılır.
% referansı: Yazı boyutu / Genişlik / Yükseklik arasından seçim yapın. Yerleşim için Genişlik/Yükseklik; tipografi (örn. satır yüksekliği) için Yazı boyutu kullanın.
Kırılım hazır ayarları: Mobil / Tablet / Masaüstü / Geniş seçenekleri, genişlikler arasında hızlı tahmin için görünüm boyutunu da ayarlar. Bu sadece tasarım tahmini içindir, çalışma zamanı medya sorgusu değildir.
Görünüm boyutu: vw/vh/vmin/vmax ve % (referans genişlik/yükseklik olduğunda) için kullanılır. Gerçek cihazlar adres çubukları, güvenli alanlar ve kaydırma çubukları nedeniyle farklılık gösterebilir.
İpuçları: 1) 16px, kök ve EM referansı için yaygın bir değerdir; ancak özelliğin fiilen kullandığı yazı tipi boyutunu kullanın; 2) kesme noktaları arasında geçiş yaparak düzen yüzdelerini doğrulayın; 3) bu kontroller tasarım aşamasındaki tahminleri destekler ve tarayıcının son DOM/CSS hesaplamasının yerini almaz. Mutlak birimler her zaman 1in = 96px oranını kullanır.

Sınırlamalar ve uyumluluk

% referansı, blok içeren CSS özelliğine ve düzen moduna bağlıdır; bu araç, tahmin için canlı bir üst öğe/kapsayıcı ölçümü değil, seçilen yazı tipi boyutu/görüntü alanı genişliği/görüntü alanı yüksekliği referansını kullanır
ex/ch burada EM referans yazı tipi boyutuna dayalı yaklaşık değerlerdir; sonuçlar yazı tipi metriklerinin incelenmesine dayanmaz ve yazı tipleri ile tarayıcılara göre değişir.
Klasik vw/vh/vmin/vmax kaydırma çubuklarına/adres çubuklarına/güvenli alanlara göre değişir; bu araç dvh/svh/lvh, vi/vb, güvenli alan veya kapsayıcı sorgu birimlerini hesaplamaz
Mutlak CSS birimi dönüşümleri sabit 1in = 96px oranını kullanır. Fiziksel ekran piksellerini baskı boyutuyla ilişkilendirmek, bu aracın sağlamadığı ayrı bir cihaz/baskı iş akışı gerektirir.

Gizlilik ve güvenlik

İşlem tarayıcınızda çalışır. Girdi değeri, From/To birimleri, birim başına önbelleğe alınan değerler, kök yazı tipi boyutu, EM referans yazı tipi boyutu, görünüm alanı, yüzde referansı ve kesme noktası seçimi geçerli tarayıcı oturumunda veya tarayıcı depolamasında kalabilir. Bir çalışma alanını kaydeder ya da WebDAV eşitlemesini etkinleştirirseniz bu değerler eşitleme ayarlarınıza göre kaydedilebilir. Dönüştürülen sonuçlar geçerli değer, birimler ve bağlam ayarlarından yeniden hesaplanır ve ayrı sonuçlar olarak saklanmaz. Bu sayfa URL'leri getirmez veya sunucu tarafında dönüştürme için değer göndermez. Paylaşılan cihazlarda gerektiğinde değerleri, ayarları ve site verilerini temizleyin.

Sıkça Sorulan Sorular

4

Sonraki adım için bu ilgili araçlarla devam edin.

Araçların tüm işlenmesi tarayıcınızda yerel olarak gerçekleşir.