Akışkan Düzenler

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 63 / 76.

Duyarlı web tasarımında, akışkan bir düzen sabit piksel değerleri yerine esnek ızgaralar ve yüzdeler gibi göreceli birimler kullanarak farklı ekran boyutlarına uyum sağlar. Bu, düzenin herhangi bir ekrana sığacak şekilde genişlemesine veya küçülmesine yardımcı olarak tüm cihazlarda sorunsuz bir kullanıcı deneyimi sağlar.

Akışkan düzenlerin temel ilkeleri şunlardır:

Göreceli birimler: Genişlikler, yükseklikler, kenar boşlukları ve iç boşluklar için sabit pikseller (px) yerine yüzdeler (%), viewport birimleri (vw, vh) veya em'ler (em) kullanılması.

Esnek ızgaralar: Farklı ekran boyutlarına uyum sağlayabilen ızgara tabanlı düzenler oluşturmak için CSS Grid veya Flexbox kullanmak.

Max-width ve min-width: Öğelerin uç ekran boyutlarında çok geniş veya çok dar olmalarını önlemek için maksimum ve minimum genişliklerin ayarlanması.

İşte yüzdeler kullanılarak oluşturulmuş temel bir akışkan düzen (fluid layout) örneği:

.container {
    width: 90%; /* Konteyner, görünüm alanı genişliğinin %90'ını kaplar */
    max-width: 1200px; /* Konteyner 1200 pikseli geçmeyecektir */
}
.sidebar {
    width: 30%; /* Yan menü, konteyner genişliğinin %30'unu kaplar */
    float: left;
}
.main-content {
    width: 70%; /* Ana içerik alanı, konteyner genişliğinin %70'ini kaplar */
    float: left;
}

Bu örnekte, .container öğesi 90%'lık akışkan bir genişliğe sahiptir; bu da her zaman görünüm alanı (viewport) genişliğinin %90'ını kaplayacağı anlamına gelir. max-width özelliği, konteynerin büyük ekranlarda çok genişlemesini önlemek için 1200px olarak ayarlanmıştır.

.sidebar ve .main-content öğeleri, sırasıyla 30% ve 70% akışkan genişliklere sahiptir ve bu da onların konteynırın genişliğine uyum sağlamalarına olanak tanır.

Görev

Kolay

Size, sidebar ve main sınıflarına sahip iki alt bölme (<div>) içeren bir üst bölmeye (<div>) sahip bir HTML belgesi verilmiştir. Göreviniz, yüzdeler kullanarak akışkan bir düzen (fluid layout) oluşturmaktır. Aşağıdaki adımları izleyin:

container sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın. width özelliğini 80% ve margin özelliğini 0 auto olarak ayarlayın. Görselleştirme için 1px solid black değerinde bir border ekleyin.
sidebar sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın. width özelliğini 25% olarak ayarlayın ve sola kaydırın (float to the left).
main sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın. width özelliğini 75% olarak ayarlayın ve sağa kaydırın (float to the right).

Kopya kağıdı

Akışkan bir düzen (fluid layout), sabit piksel değerleri yerine yüzdeler gibi esnek ızgaralar ve göreceli birimler kullanarak farklı ekran boyutlarına uyum sağlar.

Akışkan düzenlerin temel ilkeleri:

Göreceli birimler: Sabit pikseller yerine yüzdeler (%), görünüm alanı birimleri (vw, vh) veya em (em) kullanın
Esnek ızgaralar: Uyarlanabilir düzenler için CSS Grid veya Flexbox kullanın
Maksimum genişlik ve minimum genişlik: Öğelerin çok geniş veya çok dar olmasını önlemek için sınırlar belirleyin

Temel akışkan düzen örneği:

.container {
    width: 90%; /* Görünüm alanı genişliğinin %90'ını kaplar */
    max-width: 1200px; /* 1200 pikseli aşmaz */
}
.sidebar {
    width: 30%; /* Konteyner genişliğinin %30'u */
    float: left;
}
.main-content {
    width: 70%; /* Konteyner genişliğinin %70'i */
    float: left;
}

Kendin dene

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>