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

Merhabalar, son zamanlarda ki uzun zamandır kullanılan ve responsive tasarım nasıl yapılır ve mantığı nedir? Bunlardan bahsedeceğim ve sonunda bir video ders çektim.

Responsive Tasarım Nedir?

Responsive tasarım dediğimiz şey site tasarımının mobil,tablet veya bilgisayara sorumlu bir tasarım hale gelmesini sağlıyor. Ekran boyutu belirttiğimiz genişlik ve yüksekliğin altına düştüğünde yeni yazdığımız kodlar çalışıyor ve sorumlu hale geliyor.

m.siteadi.com şeklinde de yapabilirim ne işime yarayacak?

Tamam haklısın “m” subdomain kullanarakta yapabilirsin fakat Google mobile uyumlu olarak tasarlanmış sistemlere daha fazla puan veriyor. Dahası m. diye yönlendirme yapıp ayrı içerikmiş gibi gözükeceğine bu şekilde tek domainde içerikler ve yapılar hep aynı olacak.

İlk olarak bunları yapabilmek için birden fazla seçenek var örneğin Bootstrap kullanabilirsiniz. Fakat ben bootstrap’e alışamadığım için css media etiketini kullanarak yapıyorum.

Nasıl Kullanabiliriz?

Link tanımlamamızı şöyle yapmamız sağlıklı olacaktır;

 <link rel="stylesheet" href="style.css" media="all" /> 

Diğer bir kısım da büyük projelerde meta etiketinde sitenin responsive olduğunu belirtmeniz.

 

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

Bu açıklama kodlarımız da;
Width=device-width: genişlik değerimizin değişken olduğunu cihazın ekran genişliğini alacağını belirtir.
initial-scale=1: Bu ise siteye ilk girildiğinde ölçeğinde bir değişiklik yapılmamasını sağlıyor. Yapılmamasının sebebi 1 değerini vermemiz. Bu değeri değiştirerek ölçeği değiştirebiliriz.

Daha sonra CSS te genişliğin x piksel sonra neler yapılacağını söylememize yarayan media etiketini kullanacağız.

 

@media only screen and (max-width: 700px){
  body{
    background: darkred;
  }
}

Burada ise genişliğimiz 700px’in altına indiğinde arkaplan rengini koyu kırmızı olarak ayarladık.

Diğer ayrıntılar videoda;

Demo mode kısmı benimde canımı sıktı ama diğer videolarda kaldıracağım.

Kolay gelsin.

Responsive Tasarım Nasıl Yapılır?” üzerine 2 düşünce

  1. Geri izleme: Responsive Tasarım nedir? Responsive tasarım nasıl yapılır?

  2. Geri izleme: Mobil uyumlu websitesi nasıl yapılır? Responsive Tasarım

Bir Cevap Yazın