CSS Birim Dönüştürücü
Bir CSS uzunluğunu px, rem, em, vw, vh, pt ve yüzde arasında dönüştürün. Değeri girin, birimini seçin, kök ve üst öğe yazı tipi boyutları ile görünüm alanı ölçülerini ayarlayın; tüm karşılıkları tek seferde alın.
px, rem, em, vw ve vh Arasında Dönüştürme
CSS Birimleri Formülü
Burada:
- \(v\) — girdiğiniz uzunluk, kendi birimi cinsinden
- \(f(\text{birim})\) — o türden bir birimin kaç piksele denk geldiği:
- \(px\): 1 \(rem\): kök yazı tipi boyutu \(em\): üst öğenin yazı tipi boyutu \(vw\): görünüm alanı genişliği \(/ 100\) \(vh\): görünüm alanı yüksekliği \(/ 100\) \(pt\): \(96/72 = 1.3333\) \(%\): üst öğenin yazı tipi boyutu \(/ 100\)
Hesaplayıcı önce girilen değeri piksele çevirir, sonra her hedef birimin piksel çarpanına böler. Bu iki adımlı yöntem, yedi sonucun da birbiriyle tutarlı olmasını sağlar.
CSS Birimleri – Hesaplama Örneği
Örnek: 24px değerini rem, em, vw, vh ve pt birimlerine dönüştürelim; kök ve üst öğe yazı tipi boyutu 16px, görünüm alanı ise 1920×1080 (hesaplayıcının varsayılanları).
\[ px = 24 \times 1 = 24 \]
\[ rem = \frac{24}{16} = 1.5 \quad em = \frac{24}{16} = 1.5 \]
\[ vw = \frac{24}{1920/100} = \frac{24}{19.2} = 1.25 \quad vh = \frac{24}{1080/100} \approx 2.2222 \]
\[ pt = 24 \times \frac{72}{96} = 18 \]
Sonuç: 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.
CSS Birim Dönüştürücü nasıl kullanılır?
- Değer alanına uzunluğu girin — örneğin 24. Negatif değerler de çalışır; negatif margin değerleri için kullanışlıdır.
- CSS Birimi açılır listesinden bu değerin birimini seçin (px, rem, em, vw, vh, pt veya %).
- Kök Yazı Tipi Boyutunu ayarlayın —
<html>öğesinin yazı tipi boyutu. Tarayıcılar varsayılan olarak 16px kullanır. - Üst Öğe Yazı Tipi Boyutunu ayarlayın — üst öğenin hesaplanan yazı tipi boyutu; em ve % dönüşümleri için gerekir.
- Tarayıcı penceresinin Görünüm Alanı Genişliğini ve Görünüm Alanı Yüksekliğini piksel cinsinden girin; vw ve vh sonuçları bu değerlere bağlıdır.
- Dönüştürülen Değerler altında tüm karşılıkları tek seferde görün; ayrıca sizin ayarınızda her birimin kaç piksele denk geldiğini gösteren dönüşüm tabanı da yer alır.
CSS birimleri nedir ve neden önemlidir?
CSS uzunlukları iki aileye ayrılır. px ve pt gibi mutlak birimlerin sabit bir boyutu vardır: CSS spesifikasyonu referans pikseli, 1in = 96px = 72pt olacak şekilde tanımlar. Göreli birimler ise bağlama bağlıdır: rem kök öğenin yazı tipi boyutuna, em üst öğenin yazı tipi boyutuna, vw ve vh görünüm alanının genişliğinin ya da yüksekliğinin %1'ine, % (font-size için) üst öğenin yazı tipi boyutuna gönderme yapar.
Birim seçimi, düzenin nasıl davranacağını belirler. px cinsinden değerler kullanıcı tercihlerinden bağımsız olarak sabit kalır; bu onları kenarlıklar ve ince ayrıntılar için öngörülebilir, tipografi için ise katı kılar. rem cinsinden değerler kök yazı tipi boyutuyla ölçeklenir; kullanıcı tarayıcının temel metnini büyütürse rem ile boyutlandırılmış her şey orantılı olarak büyür — bu, erişilebilirlik açısından önemli bir gerekliliktir. em ise iç içe geçmiş öğelerde katlanarak birikir ve derin işaretlemede şaşırtıcı sonuçlar doğurabilir.
Görünüm alanı birimleri tipografiyi ve boşlukları pencere boyutuna duyarlı hale getirir. 50vw olarak ayarlanan bir genişlik her zaman ekranın yarısını doldurur; bu yüzden hero bölümleri ve akışkan tipografi sık sık vw ile rem'i clamp() içinde birleştirir. vw ve vh her yeniden boyutlandırmada değiştiğinden, bunları piksele dönüştürmek yalnızca tek bir görünüm alanı boyutu için anlamlıdır — hesaplayıcıya girdiğiniz boyut.
Sonuçları yorumlamak kolaydır: her sonuç, aynı fiziksel uzunluğun başka bir birimle ifade edilmiş hâlidir. Bir tasarım sistemini px'ten rem'e taşıyorsanız rem satırı, yazmanız gereken token değerini verir; puan (point) kullanan tasarım araçlarıyla karşılaştırıyorsanız veya baskı işi yapıyorsanız pt satırı doğrudan karşılığı gösterir.
Varsayımlar, sınırlamalar ve pratik ipuçları
- Dönüştürücü standart CSS referans pikselini varsayar:
1in = 96px = 72pt. Fiziksel (baskı) çıktı, cihaza göre hafif farklılık gösterebilir. - Yüzde, üst öğenin yazı tipi boyutuna göre kabul edilir;
font-sizeiçin bu doğrudur.width,height,marginvepaddingiçin yüzde ise üst öğenin boyutlarını temel alır; bu durumlarda farklı bir referans değeri gerekir. - em, üst öğenin yazı tipi boyutuna göredir.
line-heightveyapaddinggibi öğenin kendi özellikleri içinde kullanıldığında em, o öğenin kendi yazı tipi boyutunu temel alır — Üst Öğe Yazı Tipi Boyutu alanını buna göre ayarlayın. - vw ve vh sonuçları yalnızca girdiğiniz görünüm alanı ölçüleri için geçerlidir. Dönüştürülen değerlerin nasıl değiştiğini görmek için birkaç boyutu deneyin (ör. 1920×1080, 1366×768, 390×844).
- Tarayıcılar bazı yapılandırmalarda asgari yazı tipi boyutu uygular; bu, çok küçük rem veya em tabanlı metnin hesabın öngördüğünden büyük görüntülenmesine yol açabilir.
- Pratik bir kural: varsayılan 16px kök yazı tipi boyutunda 1rem = 16px'dir, yani px ÷ 16 = rem. Kökü 10px yaparsanız rem değerleri px ÷ 10 ile birebir eşleşir; birçok tasarım sisteminin 10px kök kullanmasının nedeni budur.
Ölçü veya mühendislik birimleri arasında da dönüşüm yapmanız gerekiyorsa Güç Birimi Dönüştürücü, Veri Aktarım Hızı Dönüştürücü veya genel Hız Birimleri Dönüştürücü araçlarımızı deneyin.
Sıkça Sorulan Sorular
Hesap makinesi olmadan px'i elle nasıl rem'e çeviririm?
Piksel değerini kök yazı tipi boyutuna bölün. Tarayıcı varsayılanı olan 16px ile formül şudur: \( rem = px \div 16 \). Buna göre 24px = 1.5rem, 32px = 2rem ve 12px = 0.75rem. Ters yönde çarpın: \( px = rem \times 16 \). Proje farklı bir kök boyutu kullanıyorsa — örneğin yaygın %62,5 hilesindeki 10px gibi — 16 yerine o değeri koyun.
em ile rem arasındaki fark nedir, hangisini ne zaman kullanmalıyım?
rem her zaman kök öğenin yazı tipi boyutunu temel alır; bu yüzden 1.5rem belge içinde her yerde aynı anlama gelir. em ise üst öğenin (padding ve line-height gibi özelliklerde öğenin kendi) yazı tipi boyutuna göredir ve iç içe işaretlemede katlanarak birikir. Yaygın bir kılavuz: değerler öngörülebilir kalsın ve kullanıcı tercihlerine saygı göstersin diye yazı tipi boyutları ile boşluklar için rem kullanın; düğme dolgusu gibi yerel metinle birlikte ölçeklenmesini istediğiniz durumlarda em kullanın.
1pt kaç pikseldir ve pt ile px inçle nasıl ilişkilidir?
CSS, referans pikseli \( 1\text{inç} = 96\text{px} = 72\text{pt} \) olacak şekilde tanımlar. Bu, 1pt'in \( 96/72 \approx 1.3333 \) piksele, 1px'in de 0,75pt'e denk geldiği anlamına gelir. Kelime işlemcilerin ve baskı tasarım araçlarının CSS'ten farklı sayılar göstermesinin nedeni budur: 12pt bir yazı tipi ekranda 16px olarak görüntülenir. Dönüştürücü, pt sonuçlarında tam olarak bu oranı kullanır.
em değerlerim tarayıcının gösterdiğiyle neden uyuşmuyor?
İki yaygın nedeni var. Birincisi, em katlanır: üst öğe 16px'lik köke göre 1.25em yazı tipi boyutundaysa (20px) ve alt öğeye 1.5em atanmışsa alt öğe 30px olur, 24px değil. İkincisi, bir öğenin padding, margin ve line-height gibi özelliklerinde em, üst öğenin değil o öğenin kendi yazı tipi boyutunu temel alır. Bu durumlarda dönüştürücüde öğenin kendi hesaplanan yazı tipi boyutunu Üst Öğe Yazı Tipi Boyutu alanına girin.
vw ve vh değerleri her ekranda aynı mıdır?
Hayır. 1vw, geçerli görünüm alanı genişliğinin %1'idir; bu yüzden aynı vw değeri farklı pencere boyutlarında farklı piksel karşılıklarına sahiptir. Örneğin 10vw, 1920px genişliğinde bir ekranda 192px'tir; 390px'lik bir telefonda ise yalnızca 39px. vw/vh değerlerini piksele yalnızca belirli bir görünüm alanı boyutu için dönüştürün — hesaplayıcıya hedeflediğiniz ölçüleri tam olarak girin ve diğer kırılım noktaları için işlemi yeniden çalıştırın.
Bir web sitesinin gerçekte kullandığı kök yazı tipi boyutunu nasıl bulurum?
Tarayıcının geliştirici araçlarını (DevTools) açın, <html> öğesini inceleyin ve Styles ya da Computed panelindeki hesaplanan font-size değerine bakın. Geçersiz kılan bir CSS kuralı yoksa tarayıcı varsayılanı olan 16px geçerlidir. Bazı sitelerin %62,5 hilesiyle kökü 10px'e ayarladığını, böylece 1rem = 10px olduğunu unutmayın. Ayrıca bir tarayıcı eklentisinin veya asgari yazı tipi boyutu ayarının etkin değeri değiştirip değiştirmediğini de kontrol edin.
Erişilebilirlik için px mi rem mi daha iyi?
Yazı tipi boyutları için genellikle rem tercih edilir; çünkü kullanıcı tarayıcının temel metin boyutunu artırdığında rem ile ölçeklenir, px tabanlı metin ise sabit kalır ve bu tercihi yok sayabilir. Bu, görme engelli kullanıcılar için önemlidir ve WCAG gibi erişilebilirlik kılavuzlarının bir gereğidir. Ölçeklenmesi istenmeyen kenarlıklar, gölgeler ve ince çizgiler için px uygundur. Pratik yaklaşım şu şekilde: tipografi ve boşluklar için rem, piksel duyarlı dekoratif ayrıntılar için px, akışkan tipografi için rem ve vw ile clamp().