Şimdi gelelim mobil ölçülere ve bunları nasıl yapacağımıza.
Gördüğümüz üzere yukarıda bazı cihazların ekran boyutları görünüyor.Bunlar en sık kullanılan çözünürlük ölçüleridir.Şimdi biraz inceleme yapalım.
Dikey telefonların çözünürlüğü : 479px’dir ( En Geniş )
Yatay telefonların çözünürlük aralığı : 480 – 767 px’dir.
Dikey tabletlerin çözünürlük aralığı : 768 – 1023 px’dir.
Yatay tablet ve bilgisayarların çözünürlüğü eşittir ( veya büyüktür ) : 1024 px.
Bu boyutlara baktığımızda sitemiz için 4 adet responsive şekilde kod yazmamız gerekmektedir. İçinden herhangi birini seçebileceğiniz gibi hepsini de yapabilirsiniz. Önerim hepsine yapmanız.
Şimdi gelelim nasıl yapacağımıza.
Öncelikle responsive tasarımların çalışması için
tagları arasına
kodlarını eklemeniz gerekmektedir.
Şimdiki iş ise css dosyalarımızda düzenlemeler yapmak. Dikkatli şekilde yapar ve mantığını kavrarsanız ileride kendi tasarımlarınız için de kullanabilirsiniz.
Css kodumuz:
@media only screen and (max-width: 479px) { }
Gördüğünüz gibi burada üstteki şemada belirttiğimiz üzere dikey telefonlar için bir css kodu yazdık. En geniş çözünürlük olarak 479 px belirtilmiş. Boş olan parantezlerimizin arasına css kodlarımızı yazıyoruz. Yazdığınız kodlar 479 px çözünürlükten küçük çözünürlüklerde geçerli olacak.
Mesela
kodlar
şeklinde bir div oluşturdunuz. Bunu üstteki versiyona uyarlamak istiyoruz diyelim. Kod taslağı aşağıdaki gibi olacaktır.
@media only screen and (max-width: 479px) {
.alan1{background:#fff;color:#ededed;font-family:Tahoma;width:100%;}
}
Mantık olarak responsive özelliği kazandırmak bu şekildedir. Diğer çözünürlükler aşağıdadır.
@media only screen and (min-width: 480px) and (max-width: 767px) { }
@media only screen and (min-width: 768px) and (max-width: 1023px) { }
Yukarıdaki yazımızda sizlere responsive özelliğinin temaya nasıl kazandırılabileceği ile ilgili bilgiler verdik. Bu bilgiler ipucu niteliğinde olup daha da geliştirilebilir. Anlatımı sitenizde kullanmak istiyorsanız kaynak belirtmeniz gerekmektedir.
Kaynak: http://www.sosyalpenguen.com/responsive-tema-yapimi/