Responsive web sitesi yapmak

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; 
<style>
@media only screen and (max-width: 1024px) {
#kutucuk1 {
display: none;
}
}
</style>

Bu stil kodumuzun div etiketini de yazalım;

<div id="kutucuk1"></div>

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;
<style>
@media only screen and (max-width: 1024px) {
#kutucuk2 {
width:800px;
}
}
#kutucuk2 {
width:1280px;
}
</style>


Bu stil kodumuzun div etiketini de yazalım;

<div id="kutucuk2"></div>

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. 

Bugün bir iyilik yap, mesela bu yazıyı paylaş :

SİZİN İÇİN ÖNERİLEN YAZILAR

YORUMLAR

    Bu yazıya daha önce hiç yorum yapılmamış.
    İlk yorumu sen yap!

Yorum yap

Geçersiz bir mail adresi girdiniz. Lütfen tüm zorunlu alanları doldurun. *