Responsive tasarım bir web sitesinin her cihazla uyumlu çalışması anlamına gelir. Yani bir siteye bilgisayardan girdiğimizde çözünürlük şuan ki masaüstü ekranlara göre 1368x768’dir. Telefondan girdiğimizde ise bu değer 360x480’dir. Responsive olmayan bir site en çok tercih edilen çözünürlüğe göre oluşturulmuştur. Mobil bir cihazdan girdiğimiz zaman ekranın büyük olduğunu farkederiz. Ekranı çok uzaktan gördüğümüz için sürekli yakınlaştırmak zorundayız. Böyle bir görüntüde bizi rahatsız eder. Bunu ortadan kaldırmak için Responsive Web Tasarım yapmamız gerekir. Ayrıca seo içinde yararlı bir uygulama.
Responsive Web Tasarım Nasıl Yapılır?
Responsive bir tasarım nasıl yapılır derseniz eğer öncelikle iyi bir şekilde CSS bilgisine sahip olmanız gerekiyor. Eğer iyi derecede css biliyorsanız rahatlıkta sitenizi responsive yapabilirsiniz.
CSS kodları şu şekilde olan bir web sitesi için;
.kalip
{
width:1000px;
background:green;
}
{
width:1000px;
background:green;
}
Kalip css’ine max olan 480pxlik çözünürlükte olması gereken durumu belirtiyoruz.
@media only screen and (max-width:480 px) and (min-width:360px)
{
.kalip
{
width:360px;
background:blue;
}
}
{
.kalip
{
width:360px;
background:blue;
}
}
Bu kodları yazdığımızda ekran 480px olduğu zaman kalip divi 360 pxlik bir genişliğe sahip olacak. Ve arka plan rengi mavi olacak.
Bunu görebilmek için tarayıcınızı küçültün.
Bu sadece basit bir örnek bunu sitenizin yapısına göre her div için yapıcaksınız. Eğer küçük ekranlarda görünmesini istemediğiniz bir div varsa display:none yaparak gizleyebilirsiniz. Umarım faydalı olmuştur.
İlk Yorumu Sen Yap