Akışkan Düzenler

Coddy'nin HTML Journey'sinin CSS ile Stil Verme 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öreli birimler: Genişlikler, yükseklikler, kenar boşlukları ve iç boşluklar için sabit pikseller (px) yerine yüzdeleri (%), görünüm alanı birimlerini (vw, vh) veya em birimlerini (em) kullanma.

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

Maksimum genişlik ve minimum genişlik: Öğelerin aşırı ekran boyutlarında çok geniş veya çok dar hâle gelmesini önlemek için maksimum ve minimum genişlikleri ayarlama.

Yüzdeleri kullanan temel bir akışkan düzen örneği şöyledir:

.container {
    width: 90%; /* Konteyner, görünüm alanı genişliğinin %90'ını kaplar */
    max-width: 1200px; /* Konteyner 1200px'i aşmayacaktır */
}
.sidebar {
    width: 30%; /* Kenar çubuğu, 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% oranında akışkan bir genişliğe sahiptir; bu, görünüm alanı genişliğinin her zaman %90'ını kaplayacağı anlamına gelir. Büyük ekranlarda kapsayıcının fazla genişlemesini önlemek için max-width özelliği 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ölüm (<div>) içeren bir üst bölüm (<div>) bulunan bir HTML belgesi verilmiştir. Göreviniz, yüzdeleri kullanarak akışkan bir düzen 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 değerini 0 auto olarak ayarlayın. Görselleştirme amacıyla 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 float etmesini sağlayın.
main sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın. width özelliğini 75% olarak ayarlayın ve sağa float etmesini sağlayın.

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>