Bootstrap’ te bildiğimiz üzere ekran tipleri 4 e ayrılmakta.

  • xs (768px’ den düşük genişlikte ekranlar)
  • sm (768px den 992 px’ e kadar olan ekranlar)
  • md (992px’ den 1200px’ e kadar olanlar)
  • lg (1200px’ den daha geniş ekranlar)

Breakpoint adı verilen bu tanımlamaları, sütunlarımızı biçimlerken oldukça kullanıyoruz. Lakin bu bilgiye dinamik olarak javascript ile erişmemiz gereken durumlarda oluyor.


Örneğin;

Sayfamızda görüntülediğimiz resimleri, serverımız da birkaç boyutta saklıyoruz, ufak, orta, büyük gibi. Dolayısıyla kullanıcılarımıza da ekran genişliklerine uygun olanı göstermemiz gerekiyor. Fakat Bootstrap’ in kullandığı ve anlık olarak değişen breakpoint bilgisine erişebileceğimiz bir alan bulunmamakta. Bu duruma çözüm için internette birkaç yol denenmiş ve gayet başarılılar. Bende http://stackoverflow.com/questions/18575582/how-to-detect-responsive-breakpoints-of-twitter-bootstrap-3-using-javascript adresinden edindiğim bilgiler ışığında, bu işi ister Jquery istersenizde AngularJS projelerinde nasıl çözeceğinizi anlatacağım.

 

Jquery çözümü;

Jquery ile yazılmış responsejs (http://responsejs.com/) kütüphanesi harika bir iş çıkartıyor.

Kütüphaneyi projenize ekleyin, ardından resimleriniz linklemelerini aşağıdaki örnekteki gibi yapabilirsiniz.

<img src=”lo-fi.png” data-src481=”medium.png” data-src1025=”hi-fi.png” alt=”example” />

Yukarıdaki resim elementi, eğer ekran çözünürlüğü 481 px den küçükse lo-fi.png, 481 px den büyük ise medium.png, 1025 px den büyük ise hi-fi.png dosyasındaki resmi ekrana basar. Bu sayede hem responsive yapınızı korumuş, hemde gereksiz server maaliyetlerinden kurtulmuş olursunuz.

 

AngularJS Çözümü;

Yukarıdaki örnekte uygulamamıza bir factory ekliyoruz (responsiveToolkit) ve artık responsiveToolkit.getBreakpoint() metodu bize her an geçerli breakpoint’ i dönüyor, ardından view’ da istediğiniz alanda kullanabilirsiniz.

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir