Responsive web sitesi yapmak

Bu yazımın sonunda siz de mevcut web sitenizi responsive tasarıma dönüştürebilir veya sıfırdan yeni bir responsive web sitesi hazırlayabilirsiniz. Responsive web sitesi kullanıcının mevcut ekran boyutuna göre görselliği bozmadan uyum sağlamasıdır. Zaten kelime anlamı da bu yöndedir. (duyarlı, uyumlu)

Başlayalım, öncelikle web sitemizdeki div taglarımızın boyutlarını stabil belirlemiyoruz. @media yoluyla genişlik atıyoruz. 

Örnek olarak; 

Bu stil kodumuzun div etiketini de yazalım;
 

Bu stil kodunda demek istediğimiz: eğer ekran genişliği 1024'ün altına düşerse id'si kutucuk1 olan div tagını gizle..

Bunu örnek bir html sayfası oluşturarak deneyelim. (kutucuk1.html)

Sayfayı kenardan tutup küçülttüğünüzde göreceksiniz ki ekran boyutu 1024'ün altına düştüğü an div etiketi kaybolacaktır.

Bu göster-gizle komutu ile birçok responsive tema yapabiliriz ama biz yine de ekran boyutuna göre div genişliklerimizi belirlemeyi de öğrenelim.

Örnek olarak;


Bu stil kodumuzun div etiketini de yazalım;

Bu stil kodunda demek istediğimiz ise: ekran genişliği 1024px'den büyükse id'si kutucuk2 olan div tagının değeri 1280px olsun. Eğer ekran genişliği 1024'ün altına düşerse id'si kutucuk2 olan div tagının genişliği 800px olsun.

Bunu örnek bir html sayfası oluşturarak deneyelim. (kutucuk2.html)

Sayfayı kenardan tutup küçülttüğünüzde göreceksiniz ki ekran boyutu 1024'ün altına düştüğü an div etiketi genişliği 1280px'den 800px'e düşecektir.

Başlangıç seviyesindeki arkadaşların faydasına olması temennisi ile..

İyi çalışmalar.