Responsive Tasarım Yapmak

responsive tasarım

Günümüzde mobil ve tablet kullanımının artmasıyla birlikte responsive dediğimiz duyarlı tasarımlara ihtiyaç duyulmaktadır. Benim de bir web sitesi için responsive tasarım yapmam gerekti ve “Nasıl responsive tasarım yaparım?” diye araştırarak responsive site tasarımının nasıl yapılacağını öğrendim.

Responsive Tasarım Nasıl Yapılır?

Responsive tasarım yapmak aslında sanıldığı kadar zor değildir. Duyarlı sitelerin mantığı ziyaretçilerin kullandıkları çözünürlüğe göre CSS çalıştırmaktır. Biz de işte böyle yapacağız. Farklı çözünürlükler için farklı CSS blokları yazarak responsive şablon oluşturabilirsiniz.

/* Maksimum 479px çözünürlükte çalıştırılacak CSS kodları */
@media only screen and (max-width: 479px) {
.ornek {width:300px;}
.kutu {background:blue;}
}

/* 480px ve 767px arası çözünürlükte çalıştırılacak CSS kodları */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.ornek {width:450px;}
.kutu {background:green;}
}

/* 768px ve 1023px arası çözünürlükte çalıştırılacak CSS kodları */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.ornek {width:700px;}
.kutu {background:red;}
}

İlk örneğimizde “ornek” isimli elementin genişliğini 300 piksel olarak ayarladık ve “kutu” isimli elementin arkaplanına mavi rengini verdik.

İkinci örneğimizde “ornek” isimli elementin genişliğini 450 piksel olarak ayarladık ve “kutu” isimli elementin arkaplanına yeşil rengini verdik.

Üçüncü örneğimizde “ornek” isimli elementin genişliğini 700 piksel olarak ayarladık ve “kutu” isimli elementin arkaplanına kırmızı rengini verdik.

Siz de bu bu tür değişikliklerle sitenizin hangi çözünürlükte nasıl görüneceğini ayarlayabilirsiniz. Dilerseniz farklı çözünürlük aralıkları belirterek de kullanabilirsiniz.

Web sitenizin çeşitli tablet ve telefon çözünürlüklerinde nasıl göründüğüne buradan ya da buradan bakabilirsiniz. Responsive tasarımlarınızı yaparken oldukça ihtiyacağınız olacak.

18.05.2014 Web Tasarım 2 yorum

, , , , ,

2 yorum

Ibrhm09.12.2014

Guzel bir şekilde açıklamışsınız. Teşekkürler. Cok Yardimci oldu.

yararlı bilgi leriniz için tşk ederim iyiki varsınız

Yorum Yazın

kod.gen.tr