Responsive Tasarım Nedir?

Responsive tasarım yapmak yeni nesil tasarımlar adına büyük önem taşımaktadır ve Yurtdışında bir çok web sitesi artık responsive olarak tasarlanmaktadır. Responsive Design Web Sitesi araması ile en iyi siteleri inceleyebilirsiniz. Web tasarım kavramı gelişen internet dünyasıyla beraber hızlı bir değişimin içerisine girmiş oldu. Ancak ne yazık ki firma sahipleri bu kavramın ne olduğunu tam olarak bilmediği için web siteleri için oldukça avantajlı olan responsive tasarım imkanından mahrum kalıyorlar. Responsive tasarım, bilgisayar, tablet, telefon ve benzeri tüm ekranlarda; yatay scrollbar’sız ve sorunsuz bir şekilde çalışan aktif tasarımlardır.

Tüm ekran boyutlarına uygun site yaparken öncelikle en fazla kullanılan ekran boyutlarını bilmemizde fayda olacaktır.

Masaüstü, Notebook için 1024px ve üzeri
Tabletler için 768px – 1023px
Akıllı telefonların yatay tasarımları ve bazı tabletler için. 480px – 767px
Akıllı telefonlar için: 479px ve altı

Bu çözünürlüklere göre css dosyasında örneğin 480px ve daha düşük ekranlar için;

"@media screen and (max-width: 480px)"

Kodu yazılarak css dosyası bu çözünürlük için düzenlenir. Diğer çözünürlükler için de aynı kodu yazacağız, tek değiştirmemiz gereken alan genişliği çözünürlüğe göre değiştirmek olacaktır. Ayrıca Sayfanın responsive olması için

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

kodunun mutlaka head tagları arasında olması gereklidir.