Kök öğenin yazı tipi boyutu, üst öğenin yazı tipi boyutu ve DPI değerini kullanarak px'i rem, em, pt, pika, inç ve mm'ye dönüştürün. CSS, 1 in = 96 px = 72 pt olarak tanımlar.
Anlamlı basamaklar: 10; En yakına; eşit uzaklıkta sıfırdan uzağa
CSS biçiminde
1.5rem
Piksel olarak
24px
16 px kök yazı boyutu ve inç başına 96 piksel ile 24px, 1.5rem eder.
Yazı boyutları yanında piksel boyutu
Her birimde 24px Satır sayısı: 10
Birim
Değer
Tanım
piksel (px)
24px
1 px
tipografi puntosu (pt)
18pt
1 pt = 1/72 in
pika (pc)
1.5pc
1 pc = 12 pt = 1/6 in
İnç (in)
0.25in
1 in = DPI px
Santimetre (cm)
0.635cm
1 cm = 1/2.54 in
Milimetre (mm)
6.35mm
1 mm = 1/25.4 in
çeyrek milimetre (Q)
25.4Q
1 Q = 0.25 mm
em (üst öğe yazı boyutu)
1.5em
1 em = parent font size
rem (kök yazı boyutu)
1.5rem
1 rem = root font size
Üst öğe yazı boyutunun yüzdesi (%)
150%
100% = parent font size
Nasıl hesaplanır S
Bir px içindeki piksel sayısı
1px=1px
1 px
Piksel olarak değer
24×1=24px
Bir rem içindeki piksel sayısına bölün
1624=1.5rem
1 rem = root font size
CSS birim dönüştürücü (px'ten rem, em, pt'ye) hakkında
CSS uzunluğu piksel üzerinden dönüştürür. Mutlak birimler arasındaki oranlar sabittir: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q çeyrek milimetredir. Yazıya göre birimler sayfaya bağlıdır: 1 rem kök öğenin yazı boyutu; font-size ayarında 1 em veya 100% üst öğenin yazı boyutudur. Dönüştürücü önce piksele çevirip hedef birim başına piksel sayısına böler.
Ön yüz geliştiricileri, kök yazı boyutu okurun tercihini gözettiğinde metnin de bu tercihe uyabilmesi için tasarımdaki piksel ölçülerini rem’e çevirir: varsayılan 16 px kökte 24 px, 1.5 rem eder. Baskı tasarımcıları çözünürlük alanını kullanır; 300 DPI’da 10 mm logo yaklaşık 118 piksel ister.
Ekrandaki CSS inç değeri ölçülen bir inç olmak zorunda değildir. CSS, inç başına 96 px oranını ve yaklaşık 0.0213° görsel açılı referans pikseli kullanır. Cetvelle uyum, ortama ve uygun yazdırma ayarlarına bağlıdır.
Formülde xₛ ve xₜ kaynak ve hedef değerleri; pₛ ve pₜ ise bu birimler başına piksel sayılarıdır. Çarpanlar, girdiğiniz yazı boyutlarını ve piksel yoğunluğunu kullanır.
Tipografi bağlamını belirtin
Değeri, birimleri, kök yazı boyutunu ve üst öğenin yazı boyutunu girin. Birim başına piksel katsayıları x_target = x_source × p_source / p_target içinde kullanılır. rem köke bağlıdır; bu aracın em ve yüzde modeli font-size için üst öğeyi kullanır.
Sayısal bağlamı kontrol edin
root = 16 px; 24 px = 1.5 rem, fakat root = 20 px; 24 px = 1.2 rem olur. Mutlak CSS birimlerinin ilişkisi 1 in = 96 CSS px = 72 pt şeklindedir. Yoğunluk alanıyla fiziksel piksel sayısı da hesaplanabilir; örneğin 10 mm × 300/25.4 px/mm ≈ 118.110236 px.
Bağlamları karşılaştırın
Uzun ondalıklar yuvarlanır; her satır belirtilen yazı boyutunu ve yoğunluğu korur.
Miktar
Kaynak birim
Hedef birim
Bağlam
Dönüştürülmüş değer
24
px
rem
Kök 16 px
1.5
24
px
rem
Kök 20 px
1.2
12
pt
px
96 px/in
16
1
pc
pt
96 px/in
12
100
%
em
Üst öğe 16 px
1
10
mm
px
300 px/in
118.110236
CSS özelliğini göz önünde tutun
100% = 1 em (font-size context) burada modellenen yazı boyutu bağlamı içindir. Başka CSS özelliklerinde em veya yüzde başka bir bağlama dayanabilir. Araç stil sayfasını veya öğenin kutu boyutlarını okumaz.
Fiziksel piksel yoğunluğu CSS pikselinin tanımını değiştirmez. Ekrandaki CSS inçi cetvelle ölçülen bir inç olmak zorunda değildir. Tasarımı tarayıcıda ve baskıda doğrulayın. Uzunluk dönüştürücüsü tipografi bağlamından bağımsız fiziksel uzunluğu ele alır.
Doğrulama kaynağı: Denetim: 1 rem = kök yazı boyutu (16 px); 1.5 × 16.
Sorular
1 rem kaç piksel eder?
Yaygın varsayılan ayarla 16 piksel. Bir rem, kök html öğesinin yazı boyutudur; tarayıcıdaki yaygın başlangıç değeri 16 px olup kullanıcı tercihi veya stil sayfasındaki html { font-size } ile değişebilir. Bu başlangıç ayarında html { font-size: 62.5% } ile 1 rem = 10 px olur. W3C CSS Values and Units, rem birimini tanımlar; 16 px tarayıcı ayarıdır ve belirtimin zorunlu değeri değildir.
px, pt birimine nasıl dönüştürülür?
Pikseli 0.75 ile; puntoyu piksele çevirmek için 4/3 (yaklaşık 1.333) ile çarpın. İkisi de W3C CSS kuralından gelir: 1 in = 96 px = 72 pt; dolayısıyla 1 px = 72/96 pt. 16 px gövde metni 12 pt, kelime işlemcideki 11 pt metin yaklaşık 14.67 px eder.
Em ile rem arasındaki fark nedir?
rem her zaman kök öğenin yazı boyutuna; em mevcut öğeye, font-size özelliğinde ise üst öğeye bakar. İç içe em çarpılır: 1.2em liste içindeki 1.2em liste metni ortak ilk temelin 1.44 katıdır. Ancak 16 px kökte 1.2rem, derinlik ne olursa olsun 19.2 px kalır.
Yazı boyutlarında px mi yoksa rem mi kullanılmalı?
Metnin okurun tarayıcı yazı boyutu tercihine uyması için rem kullanın ve kökün bu tercihi gözetmesini sağlayın. Sayfa yakınlaştırması px ve rem’i büyütür; rem, em ve yüzdeler kök veya üst öğe bağlamından yazı tercihini izleyebilir. WCAG 2.1 başarı ölçütü 1.4.4 (AA), içerik veya işlev kaybı olmadan %200 büyütülebilen metin ister. Tarayıcı yakınlaştırması px ile bunu karşılayabilir; kök izin verirse rem yazı tercihine de uyabilir.
CSS inç birimi fiziksel bir inç ile aynı mı?
CSS inçi ekranda ölçülen fiziksel inçle eşleşmek zorunda değildir. CSS’te 1 in tam 96 px; W3C referans pikseli, 28 in uzaktan görülen 96 DPI ekran pikselidir ve açısı yaklaşık 0.0213° olur. Cihaz ve bakış mesafesi değiştiğinden telefonda 96 px kutu bir inçten küçük olabilir. Gerçek boyutlu baskıda 1 in = 25.4 mm cetvelle eşleşebilir; baskı ölçeği ve kalibrasyon da etkilidir.
Bu hesaplayıcı, yanıtları bağımsız kaynaklardan alınan 7 çözümlü örnek içerir. Bunlar test paketinde çalıştırılır; burada da çalıştırabilirsiniz.
Bu hesaplayıcıyı kendi sitenize ekleyin
Bunu, hesaplayıcının görünmesini istediğiniz yere yapıştırın. Kullanımı ücretsizdir ve burada yapılan düzeltmeleri izler; altındaki kaynak satırı da buraya geri bağlantı verir, böylece okurlarınız tam sürümü bulabilir.