“Mobil öncelikli” ne anlama gelir

Coddy'nin HTML Journey'sinin Pratik Ön Yüz 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

Sana basit bir gezinme menüsü içeren HTML verilmiştir. Görevin, bunu mobil öncelikli yaklaşımı kullanarak stillendirmektir.

1. Önce mobil stiller

Her menü öğesinin kapsayıcının tam genişliğini kaplamasını sağla (dikey olarak üst üste).
Bağlantıların tam genişliği kaplaması için display: block kullan. Stilleştirmenin geri kalanı (renkler, kenarlıklar vb.) sana kalmış. Aşağıdaki örnek görseldeki gibi görünebilir.

2. Daha büyük ekran stilleri

min-width: 768px olan ekranlar için bir medya sorgusu zaten sağlanmıştır.
Bu sorgunun içinde, .menu için display: flex kullanarak menü düzenini yatay olarak değiştir.
Menü öğeleri arasındaki boşluğu aşağıdaki örnek görselle eşleşecek şekilde ayarla.

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>