“Mobil öncelikli” ne anlama gelir

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 6 / 35.

Mobil öncelikli, web sitenizi önce mobil cihazlar için oluşturduğunuz, ardından daha büyük ekranlar için kademeli olarak geliştirdiğiniz bir tasarım stratejisidir.
Temel fikir, çoğu kullanıcının artık web'de telefonlarından gezinmesidir, bu nedenle küçükten başlamak sitenizin ziyaretçilerin çoğunluğu için iyi çalışmasını sağlar.

Mobil stilleri yazarak başlayın:

body {
  font-size: 16px;
  padding: 10px;
}

Ardından, tasarımınızı daha büyük ekranlara uyarlamak için medya sorgularını kullanın:

/* 768 pikselden daha geniş cihazlar için stiller */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Bu yaklaşım, sitenizin önce küçük ekranlarda iyi çalışmasını sağlar, ardından daha büyük cihazlardaki kullanıcılar için deneyimi geliştirir.

Görev

Kolay

Size basit bir navigasyon menüsü içeren bir HTML verilmiştir. Göreviniz, bu menüyü mobile-first approach (mobil öncelikli yaklaşım) kullanarak stillendirmektir.

1. Önce mobil stiller

Her bir menü öğesinin kapsayıcının tam genişliğini kaplamasını sağlayın (dikey olarak üst üste dizilmiş).
Bağlantıları display: block yaparak tam genişliği kaplamalarını sağlayın. Geri kalan stillendirme (renkler, kenarlıklar vb.) size kalmıştır. Aşağıdaki örnek resimdeki gibi görünebilir.

2. Daha büyük ekran stilleri

min-width: 768px ekranlar için bir medya sorgusu (media query) zaten sağlanmıştır.
Bunun içinde, .menu için display: flex kullanarak menü düzenini yatay hale getirin.
Menü öğeleri arasındaki boşluğu aşağıdaki örnek resimle eşleşecek şekilde ayarlayın.

Kopya kağıdı

Mobil öncelikli (mobile-first), web sitenizi önce mobil cihazlar için oluşturduğunuz, ardından daha büyük ekranlar için kademeli olarak geliştirdiğiniz bir tasarım stratejisidir.

Mobil stilleri yazarak başlayın:

body {
  font-size: 16px;
  padding: 10px;
}

Ardından, tasarımınızı daha büyük ekranlara uyarlamak için medya sorgularını (media queries) kullanın:

/* 768px'den daha geniş cihazlar için stiller */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Bu yaklaşım, sitenizin önce küçük ekranlarda iyi çalışmasını sağlar, ardından daha büyük cihazlardaki kullanıcılar için deneyimi geliştirir.

Kendin dene

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>