Web’in giderek daha mobil uyumlu hale geldiği bir sır değil. Aslında, StatCounter’a göre, dünya çapındaki web trafiğinin %50’den fazlası mobil cihazlar aracılığıyla oluşturulmaktadır. Bu eğilim yalnızca büyümeye devam edecek, bu nedenle web sitenizin duyarlı olduğundan emin olmanız önemlidir.
Duyarlı tasarımın en önemli yönlerinden biri, metninizin tüm cihazlarda okunabilir ve okunması kolay olmasını sağlamaktır. Bir mobil cihazdaki metin boyutu genellikle bir masaüstünden çok daha küçük olduğundan, bu zor olabilir. Ancak birkaç basit CSS numarasıyla, metninizin duyarlı olduğundan ve tüm ekran boyutlarında harika göründüğünden emin olabilirsiniz.
Yapmanız gereken ilk şey, web siteniz için bir temel yazı tipi boyutu ayarlamaktır. Bu yapılabilir
HTML belgenizin bölümü:
PROFESYONEL İPUCU: Figma, duyarlı web uygulamaları tasarlamak için harika bir araçtır, ancak onu kullanırken akılda tutulması gereken birkaç şey vardır. Bunlardan biri, metninizin duyarlı bir şekilde boyutlandırıldığından emin olmaktır.
Metniniz duyarlı bir şekilde boyutlandırılmazsa, farklı ekran boyutlarında çok küçük veya çok büyük olabilir. Bu, web uygulamanızın kötü görünmesine neden olabilir ve kullanıcıların okuması zor olabilir.
Metninizin duyarlı bir şekilde boyutlandırıldığından emin olmak için Figma’daki Metin Boyutu menüsünü kullanmanız gerekir. Bu menü, metnin boyutunu ekranın genişliğine göre ayarlamanıza olanak tanır.
Metninizin minimum ve maksimum boyutunu ayarlamak için Metin Boyutu menüsünü de kullanabilirsiniz. Bu şekilde, metninizin her ekran boyutunda her zaman iyi görünmesini sağlayabilirsiniz.
< kafa >
< stil >
vücut {
yazı tipi boyutu: 16 piksel; /* Temel yazı tipi boyutunu buradan ayarlayın */
}
Ardından, farklı ekran boyutları için yazı tipi boyutunu ayarlamak üzere medya sorgularını kullanmanız gerekir. Medya sorguları, farklı cihazlar için farklı stiller belirlemenize izin veren CSS kurallarıdır.
Örneğin, masaüstü tarayıcılar için bir stil grubunuz ve mobil tarayıcılar için başka bir stil grubunuz olabilir. Ya da tabletler ve telefonlar gibi farklı ekran boyutları için farklı stilleriniz olabilir.
Metninizi duyarlı hale getirmek için, ekranın genişliğine göre yazı tipi boyutunu ayarlamak için medya sorgularını kullanmak isteyeceksiniz. Aşağıdaki CSS kodu, 480 piksel veya daha küçük ekranlar için yazı tipi boyutunu 1vw (görüntü alanı genişliğinin %1’i) oranında artıracaktır:
@medya yalnızca ekran ve (maksimum genişlik: 480 piksel) {
vücut {
yazı tipi boyutu: calc(16px + 1vw);
}
/* Bu kodu
bölümüne ekleyin */< meta name="viewport" content="width=device-width, Initial-scale=1" > /* Metninizi uyumlu hale getirin */