Rem
Webflow varsayılan olarak px (piksel) birimini kullanır. Herhangi bir Tasarımcı giriş alanına "10" yazıp "Enter" tuşuna bastığımızda, "10px" olarak ayarlanır.
Client-First ise rem birimini kullanır ve bunu birim açılır menüsünden seçebiliriz.
REM Nedir?
Rem, "kök em" anlamına gelir.
- Rem, kök elementin yani html'in font büyüklüğüne göre ölçülen bir bağıl birimdir.
- Kök element html'dir.
- Rem, html font büyüklüğüne göre orantılıdır.
- Client-First'te uygulanan çoğu boyut rem birimiyle ifade edilir.
Tarayıcının varsayılan yazı tipi boyutunu devralmak
Client-First'te, html font-size'ı tarayıcıdan devralırız.
Tarayıcılar başlangıçta varsayılan olarak 16px'lik bir html font-size kullanır.
1rem = 16px dönüşümü tarayıcı varsayımıdır.
Based on Client-First approved sizes, we can make quick px conversions to rem. For example, Client-First approved rem values are 0.5, 1, 1.5, 2, 2.5, 3, and so on.
Client-First onaylı boyutlara dayanarak, hızlı px dönüşümlerini rem'e yapabiliriz. Örneğin, Client-First onaylı rem değerleri 0.5, 1, 1.5, 2, 2.5, 3 vb. şeklindedir.
Rem ve Client-First, tarayıcı font büyüklüğüyle en iyi erişilebilirlik uygulamalarını takip etmek için güçlü bir ikilidir.
Matematik
Her 16px, tarayıcının font-size "varsayılan" olarak ayarlandığında 1rem'e denk gelir.
Webflow projemizi oluştururken, her zaman rem hesaplamaları için temel olarak 16px kullanırız.
Her rem ölçüm dönüşümü, 16'nın katıdır.
Px değerini rem'e dönüştürmek için bu değeri 16'ya böleriz.
64px / 16px = 4rem
Rem değerini px'e dönüştürmek için bu değeri 16 ile çarparız.
2rem x 16px = 32px
Kolay okunabilir rem değerlerini kullanmanızı öneririz, örneğin 1, 2, 2.5, 3, 4, 5 gibi.
8.4375rem gibi uzun sayı değerlerinin tutarlı kullanımından kaçınmak istiyoruz. Bu değerlerin hatırlanması daha zor olabilir ve iş akışımızı yavaşlatabilir.
Webflow Designer içinde hesaplamalar
Webflow Designer içinde, çoğu birim girişinde Webflow tarafından doğal olarak rem hesaplaması yapabiliriz.
Designer'ın genişlik girişine "100/16rem" yazın, "Enter" tuşuna basın ve hesaplanan rem değerini görün.
Webflow Designer içinde herhangi bir sayıyı 16'ya bölebiliriz ve böylece rem değerini elde edebiliriz.
Erişilebilirlik avantajları
Erişilebilirlik avantajları
Tarayıcılar, varsayılan olarak 16px'lik bir html yazı tipi boyutu kullanır ve kullanıcılara bu varsayılan yazı tipi boyutunu güncelleme imkanı sağlar. Kullanıcılar tercihlerini güncelleyerek yazı tipi boyutu ayarlarını değiştirebilirler.
Tarayıcı yazı tipi boyutu ayarları, önemli bir erişilebilirlik konusudur. Kullanıcılar tarayıcı yazı tipi boyutlarını güncellediğinde, web sitesi içeriği bu değişiklikle uyumlu olmalıdır. Client-First rem sistemi, kullanıcının tarayıcı yazı tipi boyutu ayarlarına uyum sağlar.
Px ve vw gibi diğer birim ölçümleriyle çalıştığımızda, kullanıcının tarayıcı yazı tipi boyutu ayarlarını güncelleme tercihlerini göz ardı ederiz.
Tarayıcı yakınlaştırması
Rem ayrıca kullanıcının tarayıcı yakınlaştırma kontrollerini de dikkate alır. Bir kullanıcı sayfada yakınlaştırma veya uzaklaştırma yaptığında, rem birimindeki düzen ve içerik kullanıcıyla birlikte yakınlaşır veya uzaklaşır.
Ancak vw veya vh birimlerini kullandığımızda, tarayıcı yakınlaştırması çalışmayacaktır.
vw, tarayıcı penceresi genişliğine (veya vh için yüksekliğe) dayanır. Yalnızca tarayıcı penceresindeki bir değişiklik, bu birimlerle belirlenen boyutları etkiler.
Client-First, en iyi erişilebilirlik uygulamalarını takip eder. Rem biriminde çalışma kararı, doğrudan erişilebilirlik ve kullanıcı deneyimi avantajlarıyla ilgilidir.
Rem biriminin erişilebilir bir ölçüm birimi olarak faydalarını daha detaylı olarak öğrenmek için Wizardry vs. Client-First karşılaştırma makalemizi inceleyebilirsiniz. Bu makale, rem'in erişilebilirlik açısından avantajlarını teknik olarak açıklayan bir genel bakış sunar.
Önerilen px to rem değerleri
Aşağıda, tüm önerilen rem değerlerinin dönüştürülmüş px ölçümleriyle bir liste bulunmaktadır.
Client-First tarafından onaylanan bu değerler bir öneridir ve katı bir gereklilik değildir.
Bu boyutlar listesi etkileşimlidir. Değerleri yapışkan gezinme menüsü üzerinden güncelleyebilirsiniz
{{Buraya px-rem hesaplayıcısını ekleyeceğiz}}
Client-First, bu değerlerle çalışmayı önermektedir.
Yukarıdaki değerleri kullanmanın 3 istisnası bulunmaktadır.
1. Tipografi
14px olarak kullanmak, 16px çok büyük olduğunda yaygın ve önerilen bir uygulamadır. 12px yazı tipi boyutu genellikle çok küçüktür.
14px = 0.875rem
2. 2px boşluk
Küçük boşluklar için 2px kullanın. Eğer 4px'den daha küçük bir boşluk değeri gerekiyorsa, 2px kullanın.
2px = 0.125rem
3. px 1px'dir
1px kullanırken, örneğin bir CSS border olarak, değeri 1px olarak kullanın.
1px değerlerini rem'e dönüştürmeyi önermiyoruz.
Retina cihazları, retina ölçeklendirme etkisine sahip olmayan cihazlardan farklı ölçeklendirme kurallarına sahiptir. 1px kullanmak, herhangi bir retina ölçeklendirme engellemesi olmadan herhangi bir cihazda tam olarak 1px çizgi oluşturur.
1px = 1px
Finsweet Extension px to rem geçiş aracı
Finsweet Extension, px'den rem'e geçiş yapmak için bir araç sunar.
Projedeki her değeri px'den hesaplanan rem değerine dönüştürecektir.
Finsweet Extension'ın Client-First sekmesi içinde, "PX to REM Migrator" özelliği, birim geçişini yönetecektir.