Adaptiv layout

Sabit və axıcı layout

Sabit layout konteynerə sərt en verir. Axıcı layout mövcud yerə uyğun dəyişir. Adaptiv yanaşma isə müxtəlif şərtlərdə quruluşu dəyişir. Praktikada axıcı ölçülərlə media sorğuları birlikdə işləyir.

* { box-sizing: border-box; }
.container { width: min(100% - 32px, 1100px); margin-inline: auto; }
img { max-width: 100%; height: auto; }
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 260px; min-width: 0; }
@media (max-width: 600px) {
  .cards { flex-direction: column; }
  .card { flex-basis: auto; }
}

Nümunə

Ölçü vahidləri və breakpoint

px CSS pikselidir. % xassədən asılı olaraq istinad ölçüsünə, rem kök elementin şriftinə, em isə kontekstdəki şrift ölçüsünə bağlıdır. vw və vh viewport ölçülərindən hesablanır. max-width məzmunun həddən artıq genişlənməsini dayandırır.

HTML-də viewport metadata-sını saxla. Breakpoint-i konkret telefon modelinə görə deyil, məzmun artıq sığmadıqda seç. Uzun söz, böyük mətn, dar ekran və aralıq enləri yoxla. Şəkilə sabit en və hündürlük verib nisbətini pozma; lazımsız üfüqi sürüşmə yaratma.

Əlavə qeydlər və mənbələr

Sabit enli və axıcı layout-u müqayisə et. Nisbi ölçülər, max-width və media sorğuları ilə məzmunu fərqli ekranlara uyğunlaşdır; breakpoint-i məzmunun ehtiyacına görə seç.

Niyə vacibdir?

İstifadəçinin ekran ölçüsünü əvvəlcədən bilmirsən. Çevik düzülüş məzmunu hər ölçüdə əlçatan saxlayır.

Əvvəlki biliklər

CSS əsasları

Bu mövzuda

Sabit, axıcı və adaptiv layout
%, em, rem, vw və vh
Media sorğuları və viewport

Mövzuya baxış

Əvvəl kiçik ekran

Başlanğıc üslubu bir sütun üçün yaz. Məzmun sıxılmağa başladığı nöqtədə media query əlavə et. Kəsilmə nöqtəsini müəyyən bir telefon modelinə deyil, məzmunun ehtiyacına görə seç.

.kartlar { display: grid; gap: 1rem; }
@media (min-width: 48rem) {
  .kartlar { grid-template-columns: repeat(2, 1fr); }
}
img { max-width: 100%; height: auto; }

Nümunə

Sabit enli elementlər daşmanın ən yayılmış səbəblərindəndir. Uzun sözləri, formaları və şəkilləri ayrıca yoxla. Səhifə 200% böyüdüləndə də istifadə edilə bilməlidir.

Maketdən işlək səhifəyə

Sabit layout müəyyən enə, axıcı layout isə mövcud yerə uyğun ölçülərə əsaslanır. % konteynerə, rem kök şrift ölçüsünə, vw və vh viewport-a bağlıdır. Media sorğusu yalnız cihaz adına görə deyil, məzmun artıq sığmadıqda layout-u dəyişmək üçündür.

Figma maketində şrift, sətirarası məsafə, boşluq, konteyner eni və şəkil nisbətlərini müəyyən et. Resursları uyğun ölçüdə çıxar, ortaq komponentləri ayır, əvvəl semantik HTML qur. 320px və geniş ekranla yanaşı aralıq enləri də yoxla: yalnız iki hazır ekran görüntüsünə uyğunlaşmaq kifayət deyil.

Mövzu üzrə praktika

Profil səhifəni telefonda bir sütun, böyük ekranda iki sütun göstər. 320px, 768px və 1280px ölçülərində sına.

Üfüqi daşma yoxdur, mətn böyüdüləndə məzmun itmir və düymələr rahat seçilir.

Mövzunun yoxlama siyahısı

Flexbox ilə birölçülü düzülüş qur
Grid ilə kart şəbəkəsi yarat
Media query və çevik ölçülərdən istifadə et
Viewport meta etiketinin rolunu izah et
Figma maketi, resurslar və praktik layout yığımı

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Konteyneri daralt

Eni azaldıb kartların yeni sətrə necə keçdiyini gör. Sonda eni 180px et.

Konteynerin eni 260

Hədəf: Konteynerin enini 180px et.

.container { width: 260px; }

Özün sına

Kartlar səhifəni 320px, 768px və geniş ekranda yoxla. Kiçik ekranda sütuna keç, şəkilləri konteynerə sığdır və üfüqi daşmanı aradan qaldır.

Nəticəni necə yoxlayım?

320px, 768px və geniş ekranda mətn və şəkil sığır; breakpoint və nisbi ölçüləri izah edə bilirsən.

Gözlənilən nəticə

320 px-də bir sütun, 768 px və geniş ekranda üç sütun görünür.
Bütün ölçülərdə səhifə səviyyəsində üfüqi sürüşmə yoxdur.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Kartlar media sorğusu ilə sütuna keçir; minimum eni olmayan grid uşaqları və uyğunlaşan şəkillər daşmanı azaldır.

index.html

<!doctype html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nümunə səhifə</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="cards"><article><h2>Kitab</h2><p>Birinci məhsul</p></article><article><h2>Dəftər</h2><p>İkinci məhsul</p></article><article><h2>Qələm</h2><p>Üçüncü məhsul</p></article></main>
</body>
</html>

styles.css

*{box-sizing:border-box}body{margin:0;padding:16px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.cards article{min-width:0;padding:16px;background:#dce9f7;overflow-wrap:anywhere}img{max-width:100%;height:auto}@media(max-width:600px){.cards{grid-template-columns:1fr}}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.