Responsive Tasarım Nedir ve Kodu Nedir ?
Responsive tasarım tamamen web sitesini cihazlarda uyumlu tasarım haline getirmek için kullanılır. Buda demek oluyoki masaüstü tabanlı web sitesini mobil cihazdan girdiğinizde Responsive Tasarım ise mobil cihazlara göre uygun minimal bir tasarım olarak siteyi yüklemiş oluyor. Sitenin içeriği aynı fakat tasarımı yani görünümü farklı gösteriyor.
WordPress de Responsive Tasarım çoğu temayla uyumlu olurken, yanısıra HTML, CSS, PHP tabanlı web sitelerinde @media only screen and (max-width: 960px) {} kodunu ekleyerek uyumlu hale getirmiş bulunmaktayız.
WordPress de uyumlu değilse eklentiler kısmından WpTouch adlı eklentiyi kurarak sitenizi Responsive Tasarıma geçirmiş olabilirsiniz.
Tabletler için en geniş çözünürlük 960px’dir.
Yatay tutulan telefonlar için en geniş çözünürlük 768px’dir.
Dikey tutulan telefonlar için en geniş çözünürlük 479px’dir.
Bu çözünürlükleri @media only screen and (max-width: burayı ) {} kod kısmından burayı yazılı alanı değiştirerek uygun cihaz için uygun tasarıma geçmiş bulunuyoruz.
Responsive Tasarımı için kullandığımız kodun çalışması için sitenin Head kısmına <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> koduyla tanımlama yapmamız gerekir.