Yazı ve Başlıkları Her Ekran Tipine Göre Otomatik ayarlama

Web tasarım, Web Programlama ve script dilleri konuları buraya
Cevapla
Kullanıcı avatarı
velociraptor
Yottabyte3
Yottabyte3
Mesajlar: 28217
Kayıt: 14 Mar 2006, 02:33
cinsiyet: Erkek

Yazı ve Başlıkları Her Ekran Tipine Göre Otomatik ayarlama

Mesaj gönderen velociraptor » 08 Eyl 2011, 14:15

Resim

Web sayfalarının hatta uygulamalarının envai çeşit cihaz ekranında farklı farklı görünmesi tasarımcıların bazen baş edilmesi en güç sorunlarından biri haline gelebiliyor. İşte FitText özellikle yazı ve başlıkların her ekran tipine göre kendi kendilerini otomatik olarak ayarlamalarını sağlayabilen oldukça yararlı bir jQuery eklentisidir. Kullanımı oldukça kolay olan FitText ile yazı ve metinlerin her ekranda düzgün ve normal göründüğünden emin olabiliyorsunuz.
FitText'in kullanılmış olduğu bir uygulama ya da web sayfasındaki metin veya başlıklar bulunduğu mobil cihaz ya da ekranın ebatlarına göre kendi boyutunu anında ayarlayabilmektedir. Uygulamanın bunu yaparken kullandığı en temel parametre fontlara min ve max olmak üzere yapımcısı tarafından tanımlamalı iki farklı uç yazı boyutunu ayarlamasıdır.

Kod: Tümünü seç

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  $("#responsive_headline").fitText();
</script>

$("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })
FitText'i kullanırken dikkat etmeniz gereken kurallar:

Başlık ya da metinlerinizin CSS'de display: block; veya display: inline-block; içinde kullanılmasının yanı sıra div ebatının genişliği de yüzdeler cinsinden olmalıdır. Ör, width: 100%.
FitText sizin temelde belirlediğiniz CSS font ayarlarını tamamen ihmal etmektedir. Buna göre bu fontlardan herhangi birinin ebatını javascript ile daha önceden öntanımlı hale getirmediğinizden emin olmalısınız.Yazı ve başlıklarınıza bulunduğu ekran tipine göre esneklik kazandıran FitText olmazsa olmaz başucu uygulamalardan biri haline gelmelidir.
https://github.com/davatron5000/FitText.js
Knowledge determines destiny, And ye shall know the Truth and the Truth shall make you free



Cevapla