Responsive (Mobil Uyumlu) Web Tasarımı ve Media Query Kullanımı

Stajımın yirmi dördüncü haftasında, geliştirilen web sitelerinin farklı ekran boyutlarında düzgün çalışmasını sağlamak amacıyla responsive (mobil uyumlu) tasarım konusuna odaklandım. Özellikle CSS’te kullanılan media query yapısı sayesinde tasarımları farklı cihazlara göre uyarlamayı öğrendim.

Responsive Tasarım Nedir?

Responsive tasarım, web sayfasının ekran boyutuna göre otomatik olarak yeniden düzenlenmesini sağlayan bir tekniktir. Mobil telefon, tablet, laptop ve masaüstü gibi farklı cihazlarda sayfanın kullanıcı dostu şekilde görünmesini sağlar.

Media Query Kullanımı

Media query, CSS içerisinde belirli ekran boyutlarına özel kurallar tanımlamamıza olanak tanır.

Örnek Media Query


/* 768 piksel altındaki cihazlar için */
@media screen and (max-width: 768px) {
  body {
    background-color: lightgray;
  }
  .menu {
    display: block;
  }
}

Uygulamada Kullandığım Yapı

Mobilde menü butonunu yataydan dikey yapıya geçirdim
Yazı boyutlarını mobil cihazlarda daha okunabilir olacak şekilde küçülttüm
Görsellerin genişliğini %100 yaparak taşmayı engelledim
flexbox ve grid sistemlerini media query ile birlikte kullandım

Mobil Uyumlu Sayfa Yapısı Örneği


<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-direction: row;
    }

    @media screen and (max-width: 768px) {
      .container {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>

<div class="container">
  <div>Sol Bölüm</div>
  <div>Sağ Bölüm</div>
</div>

</body>
</html>

Stajda Gerçekleştirdiğim Uygulama

Kurumun “İletişim” sayfasını mobil uyumlu hale getirdim. Masaüstü görünümde yanyana duran form alanlarını, mobilde alt alta getirdim. Buton boyutlarını ve yazı alanlarını yeniden ölçeklendirdim.

Karşılaştığım Zorluklar

Mobil görünümde bazı öğelerin taşması veya hizalanmaması gibi sorunlarla karşılaştım
Media query’lerin sıralamasını ve kapsamını doğru yazmak zaman aldı
Tarayıcı önbelleği nedeniyle yapılan değişikliklerin hemen görünmemesi bazen yanıltıcı oldu

Genel Değerlendirme

Artık web sayfalarının yalnızca masaüstü için değil, her cihazda kusursuz görünmesi gerektiğinin bilincindeyim. Media query kullanarak responsive tasarım yapmak, kullanıcı deneyimini önemli ölçüde artırıyor. Bu konu, staj sürecinde öğrendiğim en işlevsel bilgilerden biri oldu.