Esnek Sayfalar

Bu dersin sonunda telefonda da bilgisayarda da düzgün görünen, esnek bir sayfa iskeleti kurabileceksiniz.

Tek sayfa, her ekran

Ziyaretçilerinizin bir kısmı 360 piksellik telefondan, bir kısmı geniş bir monitörden gelir. Her ekran için ayrı site yapmak yerine tek bir sayfayı esnek yazarız. Buna duyarlı tasarım denir.

Temel fikir basittir: Sabit ölçüler yerine, bulunduğu alana uyum sağlayan ölçüler kullanın.

Viewport etiketi

head ve meta Etiketleri dersinde bu satırı gördünüz:

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

Bu satır olmazsa telefonlar sayfayı masaüstü genişliğinde çizip küçültür ve yazılar okunmaz hâle gelir. Duyarlı tasarımın ilk şartıdır.

Sabit genişlikten kaçının

Bir elemana width: 800px verirseniz 360 piksellik ekranda sayfa yana doğru taşar. Çözüm max-width kullanmaktır: Eleman büyük ekranda sınırlanır, küçük ekranda küçülür.

Kod ile önizleme arasındaki ayracı sürükleyip ikisini karşılaştırın:

<div class="sabit">width: 500px (taşar)</div>
<div class="esnek">max-width: 500px (küçülür)</div>

.sabit {
  width: 500px;
  margin-bottom: 8px;
  background-color: lightpink;
}

.esnek {
  max-width: 500px;
  background-color: lightgreen;
}

İçerik kapsayıcısı

Çoğu sitede içerik, ortalanmış ve genişliği sınırlanmış bir kutunun içindedir. İki kenarda da her zaman biraz boşluk kalmasını isteriz. min() bunu tek satırda çözer:

<main class="kapsayici">
  <h2>İçerik</h2>
  <p>Bu kutu en fazla 400 piksel olur. Daha dar alanda ise iki yanda toplam 32 piksel boşluk bırakır.</p>
</main>

.kapsayici {
  width: min(100% - 32px, 400px);
  margin: 0 auto;
  background-color: whitesmoke;
}

min() içinde hesap yaparken calc yazmanız gerekmez.

Resimleri esnek yapmak

Resimler varsayılan olarak kendi boyutlarında çizilir ve dar kutulardan taşar. Her projede yazılan iki satırlık bir kural bunu çözer:

<div class="dar">
  <img src="baldiyetapanadam.png" alt="Örnek resim">
</div>

.dar {
  width: 60%;
  border: 2px solid teal;
}

img {
  max-width: 100%;
  height: auto;
}

• max-width: 100% resmin kutusundan büyük olmasını engeller.
• height: auto en boy oranını korur.

Okunabilir satır uzunluğu

Geniş ekranda bir paragrafın satırları ekran boyunca uzarsa okumak zorlaşır. Satır başına 45 ile 75 karakter arası rahat kabul edilir. ch birimi 0 rakamının genişliğidir ve bunun için idealdir:

p {
  max-width: 65ch;
}

Önce mobil

Tasarıma küçük ekrandan başlamak genellikle daha kolaydır. Bunun iki nedeni vardır:

1. Küçük ekranda yerleşim basittir: Her şey alt alta gelir. Bu, normal akışın zaten yaptığı şeydir.
2. Sonra yalnızca ekran büyüyünce değişecek kuralları eklersiniz. Geri almanız gereken kural azalır.

Bu yaklaşıma önce mobil denir. Bir sonraki derste bu kuralları @media ile nasıl ekleyeceğinizi göreceksiniz.

Sayfanızı test etmek

Tarayıcıda F12 ile geliştirici araçlarını açın ve telefon simgesine tıklayın (Ctrl + Shift + M). Farklı cihaz boyutlarını seçebilir veya genişliği sürükleyebilirsiniz.

Şunları kontrol edin:

• Sayfa yana doğru kayıyor mu? Kayıyorsa bir eleman taşıyordur.
• 320 piksel genişlikte yazılar okunuyor mu?
• Düğmeler parmakla kolayca basılabilecek kadar büyük mü? En az 44 piksel iyi bir hedeftir.

Yana taşan elemanı bulmak için geçici olarak * { outline: 1px solid red; } kuralını yazıp sayfaya bakabilirsiniz.

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

<img src="baldiyetapanadam.png" alt="Örnek">

<style>
  .kapsayici {
    width: min(100% - 32px, 400px);
    margin: 0 auto;
  }
</style>

<main class="kapsayici">İçerik</main>

Bu derste öğrendikleriniz

• Viewport etiketi duyarlı tasarımın ilk şartıdır.
• Sabit width yerine max-width ve min() kullanılır.
• Resimler max-width: 100% ve height: auto ile esnek olur.
• Önce küçük ekran yazılır, büyük ekran kuralları sonradan eklenir.