Duyarlı yazı tipi boyutu için bir formül

 (jameshfisher.com)
28 puan yazan xguru 2024-03-22 | 3 yorum | WhatsApp'ta paylaş
  • The New York Times, Medium, Substack gibi birçok web sitesi, yazı tipi boyutunu buna göre değiştirmek için bir breakpoint (768px gibi) kullanıyor (1.125rem ve 1.25rem)
  • CSS'in calc özelliği kullanılarak buna benzer değerler yazılabilir: calc(1.0625rem + 0.2604vw)
  • Bunu yuvarlayınca 1rem + 0.25vw olarak ifade etmek mümkün. Bu yüzden artık çoğu web sitesinde aşağıdaki CSS'i kullanıyorum
:root {  
  font-size: calc(1rem + 0.25vw);  
}

İlgili okumalar

3 yorum

 
yanggitak 2024-03-25

PC'de tasarım taslağıyla birebir aynı şekilde uygulamak isteniyorsa, kaydırma çubuğu genişliğini hariç tutan CSS variable'ın da formüle dahil edilmesi gerekmez mi diye düşünüyorum. Bildiğim kadarıyla vw birimi, kaydırma çubuğu genişliğini de içeren genişliği temel alıyor.

Eğer düz bir görselde olduğu gibi çevredeki öğelerin boşlukları da aynı oranda artıp azalacaksa, aşağıdaki sitedeki font ayarlama yöntemine de bakmak faydalı olabilir. Galaxy Fold (320px) ya da yüksek çözünürlüklü monitörlerde ise breakpoint ile uygun şekilde sınır koymak da mantıklı görünüyor.
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/
 
cometkim 2024-03-22

Bu kullanışlı bir yaklaşık değer, ancak pratikte Fluid Typography’de kullanılan breakpoint’lerin yerini tamamen alması zor.

Genellikle clamp(min_rem, calc_relative_vw, max_rem) içerik okunabilirliği ve container biçimine göre breakpoint bazında farklı uygulanıyor; buna tek bir formülle karşılık vermeye çalışınca alışılmadık form factor’leri desteklemek zorlaşıyor.

Örneğin Android popup window’ları, 21:9 monitörler ya da HMD gibi ortamlar.
 
nemorize 2024-03-23

Android popup’ları ya da HMD gibi şeyleri pek bilmiyorum ama..
21:9 gibi arkadaşlarda vh’yi de işin içine katıp kullanmak fena olmaz mı?
calc(1rem + min(1vw, 1vh) * 0.25) gibi mesela.