Günümüzde artık neredeyse bütün web sayfalarının “ben hariç” 🙂 mobil uygulaması yada mobil için yazılmış css dosyaları mevcut.Bende başarılı bir arkadaşımız olan Sabah Kemal Cansunun yapmış olduğu mobil tasarımın mobil arayüzünün css’ni yazarak sizlere anlatmaya çalışacağım.Buna responsive hali dersek daha doğru olur.
Bir mobil tasarımı yaparken ” @media ” sorgularını kullanırız.Bu sorgularda yapılan tasarımın istersek hangi genişlikte nasıl yada hangi yükseklikte ve genişlikte nasıl gözükeceğini sağlayabiliriz.Bunun için ayrıntılı bilgiye Fatih Hayrioğlunun sitesinden bakabilir google üzerinden “@media css for mobile” olarak arama yaptırdığınız zaman daha ayrıntılı bilgilere ulaşabilirsiniz.
Bu tasarımda kullandığım “@media” sorgusu şu şekildedir.
@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { /* stil kodları */ }
Burada genişliği 480px ve 600px olan ekranlarda çalışmasını istediğimiz css kodlarının çalışmasını sağlıyoruz.Bu sorgu mobil telefonlarda temiz bir şekilde çalışmakta.Tabi biz sadece 480px’lik ekran boyutlarında çalışmasını istemiyoruz bunun birde son zamanlarda çıkmış olan geniş ekranlı telefonlarda da gözükmesi için kullanacağımız bir “@media” etiketimiz daha olacak.Yalnız bunda mobil telefonumuzun yatay halini alınca kullanılacak sorguyuda kullanacağız.Bunun için “(orientation : landscape)” kullanmamız yeterli.Kod satırı aşağıdadır.
@media (max-device-width: 1024px) and (orientation: landscape) { /* stil kodları */ }
Üstte de belirttiğim gibi genişliği 1024px olan ve yatay halini almış ekranlarda işlemesini istediğimiz css kodlarının sorgusunu yazdık.Tabi bu mobil arayüzde sadece “@media” sorguları ile yetinmedik.Birde iscroll adında bir plugin ile biraz daha güzelleştirdik.Iscrool mobil telefonunuzda parmak ile scroll işlemini gerçekleştirmenizi sağlar.Kullanımı gayet basit ve “iPhone,iPad ve Android” gibi cihazlarda gayet iyi çalışan bir plugin.Birde pluginin tek problemi scroll işleminde sayfada oluşan hafif bulanıklaşma oluşturması.Buda scroll işlemi bitince hemen düzeliyor.Demo,kaynak siteler ve dosyalara aşağıdaki linklerden ulaşabilirsiniz.Ayrıca son olarak mobil emulatorlerde bakmanız yada mobil cihazınızda bakmanız daha net görüntü sunacaktır.Mobil telefondan alınmış screenler aşağıda mevcuttur.
Demo : bulutuzer.com
Kaynak Link 1 : Fatih Hayrioğlu
Kaynak Link 2 : Stephen Gilbert
Kaynak Link 3 : prototurk.com
Hocam Bunu Tam olarak Nereye Yazalım Çalışması için.
Geç geri dönüş için kusura bakmayın. Var olan Css dosyanıza yazabilir ya da responsive satırlar için ayrı bir Css dosyası üzerinden ekleyebilirsiniz.
yararlı bilgileriniz için tşk ederim.
Rica ederim. 🙂