CSS Birimlerini Dönüştürme: px, em, rem ve Diğer Birimler

Dönüşümün mantığını anlayın

CSS birim dönüştürücü, bir sayısal değeri seçtiğiniz kaynak birimden başka bir hedef birime çevirmek için kullanılır. px, em, rem, %, vw, vh, pt, cm, mm ve in etiketleri kaynak ya da hedef olarak seçilebilir. Bu araç, örneğin bir yazı boyutunu pikselden rem'e, sabit bir ölçüyü santimetreden inç'e veya ekran genişliğine bağlı bir değeri vw'ye karşılaştırmak istediğinizde işe yarar.

Dönüşüm iki aşamalı düşünülmelidir: girilen değer önce piksel karşılığına çevrilir, ardından hedef birime aktarılır. Temel boyut em, rem ve yüzde hesaplarını etkilerken görünüm alanı genişliği vw, yüksekliği ise vh sonucunu belirler. Bu yüzden göreli birimlerle çalışırken yalnızca sayıyı değiştirmek yerine tasarımda esas aldığınız boyutları da belirtmeniz gerekir. Aynı kaynak değer, farklı bağlam ayarlarıyla farklı bir hedef değer oluşturabilir.

Alanları doldurup dönüşümü çalıştırın

1. Sayısal değeri yazın. Dönüştürmek istediğiniz sayıyı değer alanına girin. Bu alan boş bırakılırsa 16 kullanılır.

2. Kaynak birimi belirleyin. Yazdığınız sayının hangi birime ait olduğunu seçin veya ilgili etiketi girin. Kaynak birim belirtilmediğinde px varsayılır.

3. Hedef birimi seçin. Hesaplama sonunda görmek istediğiniz etiketi belirleyin. Hedef alanı boşsa rem kullanılır. Kullanılabilecek etiketler px, em, rem, %, vw, vh, pt, cm, mm ve in'dir.

4. Temel boyutu bağlama göre ayarlayın. em ve rem kaynak değerleri temel boyutla çarpılır; yüzde kaynak değeri temel boyutla çarpıldıktan sonra 100'e bölünür. Hedef em, rem veya yüzde olduğunda da sonuç temel boyuta göre hesaplanır. Temel boyut girilmezse 16 kabul edilir.

5. Görünüm alanı ölçülerini kontrol edin. vw hesabında genişlik, vh hesabında yükseklik kullanılır. Genişlik için varsayılan 1920, yükseklik için varsayılan 1080 değerleri geçerlidir. Farklı bir tasarım bağlamını incelemek istiyorsanız bu iki ölçüyü ona göre değiştirin.

6. Dönüştürmeyi başlatın. Başarılı yanıtı, hedefteki dönüştürülmüş değerle birlikte ara piksel değeri açısından inceleyin. Kaynak pt değeri piksele 1,33333 katsayısıyla, cm 37,795 katsayısıyla, mm 3,7795 katsayısıyla ve in 96 katsayısıyla çevrilir. Sonuç ile ara piksel değeri başarılı işlemlerde dört ondalık basamağa yuvarlanır.

7. Ayarları kaynağınızla karşılaştırın. Sonuç beklediğinizden farklıysa önce kaynak ve hedef etiketlerini, ardından temel boyut ile görünüm alanı ölçülerini yeniden okuyun. Böylece değişikliğin sayısal girdiden mi yoksa dönüşüm bağlamından mı kaynaklandığını ayırt edebilirsiniz.

Çıktıyı bağlamıyla değerlendirin

Bir sonucu değerlendirirken kaynak birim, hedef birim, temel boyut ve görünüm alanı ayarlarını birlikte kaydedin. Hedef em, rem veya yüzde ise temel boyutun; hedef vw ya da vh ise ilgili görünüm alanı ölçüsünün hesaba katıldığını unutmayın. Aynı sayının farklı bir temel boyutla yeniden hesaplanması bu nedenle başka bir sonuç verebilir.

Birim etiketleri küçük harfe çevrilir. Tanınmayan bir kaynak etiketi, sayısal değeri zaten pikselmiş gibi işleme sokar; tanınmayan bir hedef etiketi ise piksel değerini değiştirmeden bırakır. Bu davranış, yazım hatasının otomatik olarak reddedileceği anlamına gelmez. Etiketleri desteklenen listeyle karşılaştırmak, sonucu yanlış yorumlama riskini azaltır.

Temel boyut sıfır olduğunda em, rem ve yüzde hedefleri sıfır döner. vw veya vh hedefinde kullanılan ilgili görünüm alanı boyutu sıfırsa o dönüşüm de sıfır verir. Dönüşüm sırasında bir istisna oluştuğunda işlem başarısız sonuç üretir ve istisna metnini içerir; böyle bir durumda girdileri ve boyut ayarlarını gözden geçirerek yeniden deneyin.

Bu hesaplama sayısal birim dönüşümü sunar; elde edilen değeri kullanacağınız CSS bağlamı açısından ayrıca değerlendirmeniz gerekir. Özellikle göreli birimler, seçtiğiniz temel boyut veya görünüm alanı ölçülerine bağlı olduğundan, sonucu farklı tasarım koşullarına doğrudan taşımadan önce aynı koşullarla karşılaştırma yapın.

Uygulamalı örnek

Bir tasarımcı, 16 px yazı boyutunun temel boyutu 16 olan rem karşılığını incelemek için ilgili alanları doldurur.

Değer olarak 16, kaynak birim olarak px, hedef olarak rem ve temel boyut olarak 16 girilir, sonra dönüşüm başlatılır.

Başarılı yanıtta hedef değer ile ara piksel değeri dört ondalık basamağa yuvarlanmış görünür; verilen durumda hedef sonuç 1,0 rem, ara piksel değeri ise 16,0000 piksel biçimindedir.

Sınırlamalar

• Tanınmayan etiketler doğrulama hatası olarak zorunlu biçimde reddedilmez; kaynakta piksel geçişi, hedefte ise piksel değerini koruma davranışı görülebilir. Ayrıca dönüşüm sırasında oluşan istisna, işlemi başarısız sonuç ve istisna metniyle sınırlar.

Sık yapılan hatalar

• Birim etiketini yanlış yazmak, hatanın reddedilmesi yerine kaynak değerin piksel gibi veya hedef değerin değişmeden işlenmesine yol açabilir; etiketi px, em, rem, %, vw, vh, pt, cm, mm ya da in listesinden kontrol ederek işlemi yeniden çalıştırın.

Sık sorulan sorular

Hangi CSS birimleri dönüştürülebilir?

Kaynak veya hedef olarak px, em, rem, %, vw, vh, pt, cm, mm ve in etiketlerinden biri kullanılabilir.

Alanları boş bırakırsam hangi varsayılanlar kullanılır?

Değer, kaynak ve hedef alanları boşsa sırasıyla 16, px ve rem kullanılır; ayrıca temel boyut 16, görünüm alanı genişliği 1920 ve yüksekliği 1080 kabul edilir.

Temel boyut veya görünüm alanı sıfır olduğunda ne olur?

Temel boyut sıfır olduğunda em, rem ve yüzde hedefleri sıfır sonuç verir; vw veya vh için ilgili görünüm alanı ölçüsü sıfırsa o hedef de sıfır döner.