Hızlı, yerel bir px - rem çevirici
Bu çift yönlü px - rem çevirici, statik piksel ölçülerini erişilebilir ve ölçeklenebilir göreceli birimlere dönüştürmeyi kolaylaştırır. İster bir tasarım taslağını koda döküyor, ister eski bir stil dosyasını güncelliyor olun, ihtiyacınız olan kesin CSS değerlerini anında hesaplayabilirsiniz.
Tüm hesaplamalar siz yazarken anında gerçekleşir. Araç tamamen tarayıcınızda yerel olarak çalıştığı için yükleme süresi veya ağ gecikmesi yoktur. Klavyeden elinizi kaldırmadan pikselleri sorunsuz bir şekilde rem'e çevirebilir veya tam tersini yaparak rem'i px'e dönüştürebilirsiniz.
Neden pikselleri rem'e çevirmelisiniz?
Yıllarca web geliştiricileri, font boyutlarından iç boşluklara kadar her şey için pikselleri (px) kullandı. Ancak pikseller mutlak birimlerdir. Görme bozukluğu olan bir kullanıcı, metinleri daha büyük görmek için tarayıcı ayarlarını değiştirirse (örneğin standart 16px yerine 24px), piksel olarak sabitlenmiş metinler bu tercihi yok sayar ve küçük kalır.
rem (root em) birimlerini kullandığınızda, tüm sayfa düzeniniz kullanıcının ayarlarına uyum sağlar. Kullanıcı varsayılan font boyutunu artırırsa, rem tabanlı tipografiniz, dış ve iç boşluklarınız orantılı olarak büyür. Bu da web sitenizi çok daha erişilebilir ve duyarlı (responsive) hale getirir. Bir css rem hesaplayıcı kullanmak bu süreci tahmine dayalı olmaktan çıkarır; böylece tasarım ekibinizin verdiği tam piksel ölçülerine sadık kalırken erişilebilir kodlar yazabilirsiniz.
CSS rem hesaplayıcı nasıl çalışır
Dönüştürme işlemi matematiksel olarak basittir, ancak bunu sürekli kafadan hesaplamak iş akışınızı yavaşlatabilir. Pikseli rem'e çevirme formülü şöyledir:
Hedef Piksel ÷ Temel Font Boyutu = Rem Değeri
Varsayılan olarak, neredeyse tüm web tarayıcıları temel font boyutu olarak 16px kullanır. Standart bir ekranda bir başlığın 32px görünmesini istiyorsanız, 32'yi 16'ya bölerek 2rem elde edersiniz.
Mevcut bir kod tabanı üzerinde çalışıyorsanız ve göreceli bir birimin ekranda ne kadar yer kaplayacağını anlamanız gerekiyorsa, bu aracı rem'i px'e çevirmek için kullanabilirsiniz. Formül basitçe tersine döner:
Rem Değeri × Temel Font Boyutu = Piksel Değeri
Bu hesaplayıcı her iki yönde de eşzamanlı çalışır. Alanlardan birine değer girdiğinizde diğeri anında güncellenir. Ayrıca karmaşık ondalık sayıları virgülden sonra dört basamağa yuvarlayarak, hassasiyetten ödün vermeden CSS kodunuzun temiz ve okunabilir kalmasını sağlar.
Özel temel font boyutlarıyla çalışma
16px web standardı olsa da, bazı projelerde kök font boyutu değiştirilir. Eski kod tabanlarında çok yaygın olan bir teknik "%62.5 hilesi"dir. Geliştiriciler CSS kodlarında html { font-size: 62.5%; } tanımını kullanırdı. Varsayılan 16px değerinin %62.5'i tam olarak 10px'e denk geldiği için, bu işlem temel font boyutunu 10 yapar.
Temel değer 10 olduğunda hesaplama çok kolaylaşır: 24px 2.4rem, 18px 1.8rem olur ve bu şekilde devam eder. Bu tekniği veya farklı bir özel kök boyutunu kullanan bir projede çalışıyorsanız, hesaplayıcıdaki Temel font boyutu değerini değiştirmeniz yeterlidir. Araç, 1 ile 100 arasındaki tüm temel değerleri kabul eder, mevcut değerlerinizi anında yeniden hesaplar ve tüm referans tablosunu günceller.
Tipografinin ötesinde: boşluklar ve sayfa düzeni
rem birimleri en çok font-size ile bilinse de, sayfa düzeni özellikleri için de aynı derecede önemlidir. Modern CSS standartları, göreceli birimlerin şu alanlarda kullanılmasını önerir:
- Margin ve Padding: Metin büyüdüğünde öğeler arasındaki boşlukların da orantılı olarak büyümesini sağlayarak sıkışık görünümleri engeller.
- Genişlik ve Yükseklik: İçerisindeki metinle birlikte doğal olarak büyüyen butonlar veya form alanları oluşturur.
- Media Queries: Kırılma noktalarını (breakpoints)
remveyaemcinsinden belirlemek, sayfa düzeninin yalnızca ekranın fiziksel genişliğine göre değil, metnin gerçek boyutuna göre uyarlanmasını sağlar.
Karmaşık kullanıcı arayüzü (UI) bileşenleri geliştirirken, tamamen ölçeklenebilir ve erişilebilir tasarım sistemleri oluşturmak için bu aracı Box Shadow Oluşturucu ile birlikte kullanabilirsiniz. Stil dosyanız tamamlandığında, canlı ortamda dosya boyutunu küçük tutmak için CSS Sıkıştırıcı aracımızı kullanabilirsiniz.
Hızlı referans tablosunu kullanma
Standart tasarım sistemlerinde genellikle aynı boşluk ve tipografi ölçeklerini tekrar kullanırsınız. Ana hesaplayıcının altında, yaygın piksel değerlerinin (10px'ten 64px'e kadar) otomatik olarak rem ve em birimlerine dönüştürüldüğü bir referans tablosu bulacaksınız.
Temel yazı tipi boyutunu değiştirdiğinizde bu tablo gerçek zamanlı olarak güncellenir. Standart boşluk değerleri (16, 24, 32 ve 48 piksel gibi) için harika bir kopya kağıdı işlevi görerek sizi her değeri hesaplayıcıya tek tek yazma zahmetinden kurtarır. Farklı fiziksel ölçüleri dönüştürmeniz gerekirse genel Birim Çevirici aracımıza da göz atabilirsiniz.