Responsive web sitesi yapmak

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. 

 

 

 

Hafzullah Yıldırım

Merhaba. Ben Hafzullah! Kocaeli'de yaşayan bir yazılım geliştiriciyim. 12 yıldır doğrudan sektörün içerisindeyim. Şu anda Hafzullah.com.tr yazılım firmasının kurucusu ve geliştiricisiyim. İş hayatım, örgün eğitim gören bir üniversite öğrencisiyken başladı. Freelance çalışan olarak birçok web ve masaüstü projesi içerisinde yer aldım. Düzenli olarak altında imzam olan-olacak projeler geliştiriyor, blog yazıyor ve fotograf çekiyorum.

İlk Yorumu Sen Yap

Benzer Yazılar