Responsive Tasarım

Responsive Tasarım Nedir

Bilgisayar, tablet, akıllı telefonlar gibi cihazlarla web sitemize girildiğinde tümüne uyumlu halde kodlanan, ekran ölçülerine göre ayarlanmasına Responsive denir.

Tasarımımızı Responsive Uyumlu Yapmak

Bu anlatımımızı temel css ve html bilgisine sahip olduğunuzu varsayarak yapıyoruz. Teknik terimler ile anlatım yapacağız.

• Öncelikle Head tagları arasına şu kodu yerleştirin

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

• Daha sonra sitede kullandığınız herhangi bir css dosyasına kodlarımızı eklemeye başlıyoruz

@media only screenand(min-width: 480px)and(max-width: 767px) { }

• Bu eklediğimiz css kodu 480px-767px den küçük ekranlar için geçerli olacak. Bunu dilediğimiz class’lara atıyarak sadece belirttiğimiz kodlarada uyarlıyabiliriz yani;

<div class=”mumya”></div> gibi bir sınıfımızın olduğunu varsayarak şöyle bir kod eklediğimizde

@media only screenand(min-width: 480px)and(max-width: 767px) {

.mumya{background:#333;color:#fff;width:100%;}

}

• Şu an mumya class’ımız 480×767 çözünürlükten düşük bir cihazda açıldığında eklediğimiz kod sayesinde bozulma olmayacaktır. Peki istediğimiz çözünürlüğe göre o class’ın görünmemesini nasıl sağlarız. Şöyle bir kod yazarsak;

@media only screenand(min-width: 480px)and(max-width: 767px) {

.mumya{display:none;}

}