Responsive Css Yazmak ve Mantığını Kavramak

sabahkemalGü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

yan-ekran-menu-kapali düz-ekran-menu-acik düz-ekran-menu-kapali yan-ekran-menu-acik

Yayınlayan

Bulut Üzer

Web ortamında gelişmesine yardımcı olan Yusuf Doru sayesinde şuan web developer olarak ilerlemekte.Web ve mobil ortamlarda uygulama geliştirmeye çalışmak da.Ayrı yeten de kişisel blogunda web ve php ile ilgili çalışmalarını ve deneyimlerini paylaşmayı hedeflemekte.

“Responsive Css Yazmak ve Mantığını Kavramak” üzerine 4 yorum

    1. 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.

Bir Cevap Yazın

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