Adaptiv layout üzrə praktiki iş

Maketi kod planına çevir

Figma-da əvvəl səhifənin əsas hissələrini ayır: masthead, məzmun bölmələri, kartlar və footer. Sonra şrift, konteyner eni, boşluq, rəng və şəkil nisbətini qeyd et. Maketdəki hər koordinatı absolute mövqeyə çevirmək əvəzinə elementlər arasındakı əlaqəni qur.

<main class="page">
  <section class="intro">
    <div><h1>Yeni bacarıq öyrən</h1><p>Hər gün kiçik bir addım.</p></div>
    <img src="images/study.jpg" alt="İş masası" width="600" height="400">
  </section>
</main>

Nümunə

.page { max-width: 1100px; margin: auto; padding: 24px; }
.intro { display: flex; gap: 32px; align-items: center; }
.intro > * { flex: 1; min-width: 0; }
.intro img { width: 100%; height: auto; }
@media (max-width: 700px) { .intro { flex-direction: column; } }

Nümunə

Müqayisə və düzəliş

Əvvəl semantik struktur, sonra əsas layout, sonda incə şrift və boşluq düzəlişləri et. Eyni kartın hər nümunəsi üçün ayrı qayda yazma. Şəkilləri uyğun ölçüdə ixrac et və mənbə fayllarını səliqəli saxla.

Masaüstü və mobil görünüşü maketlə müqayisə et. Sonra aralıq enlərə keç: sətirlər qırıldıqda boşluq, hizalanma və düymələrin toxunma sahəsi rahat qalmalıdır. Figma interfeysinin yeri versiyaya görə dəyişə bilər; əsas məqsəd ölçü və əlaqələri oxumaqdır.

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

Figma maketində ölçüləri, şriftləri, boşluqları və şəkil resurslarını müəyyən et. Görünüşü semantik HTML və təkrar istifadə edilən CSS qaydalarına çevir, sonra mobil və masaüstü nəticəni müqayisə et.

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

Figma maketinin oxunması
Resursların və ölçülərin götürülməsi
Maketdən responsiv səhifəyə

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Maketdəki boşluğu qur

Kartlar arasındakı məsafəni dəyiş. Maketdəki 24px boşluğa uyğunlaşdır.

Kartlar arasındakı boşluq 8

Hədəf: Boşluğu 24px et.

.container { gap: 8px; }

Özün sına

Bir maketin mobil və masaüstü variantını qur. Şrift, boşluq və şəkil nisbətlərini tutuşdur, aralıq ekran enlərində də məzmunu yoxla.

Nəticəni necə yoxlayım?

Maketin mobil və masaüstü variantı qurulub, aralıq enlərdə daşma yoxdur və təkrarlanan bloklar ortaq CSS istifadə edir.

Gözlənilən nəticə

Desktop-da mətn və kitab sahəsi yan-yana olur.
Mobil variantda kitab mətndən aşağı keçir; 600 px ətrafında da məzmun daşmır.

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.

Bu, müqayisə ediləcək sadə maket nümunəsidir: desktop-da iki sütun, mobil ekranda bir sütun.

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="layout"><section><h1>Kitabını seç</h1><p>Kiçik addımlarla hər gün oxu.</p><a href="#books">Kitablara bax</a></section><div id="books" class="cover" role="img" aria-label="Kitab üz qabığı üçün nümunə sahə">Kitab</div></main>
</body>
</html>

styles.css

*{box-sizing:border-box}.layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;max-width:960px;margin:auto;padding:32px}.layout h1{font-size:40px;line-height:1.1}.cover{aspect-ratio:3/4;max-height:280px;background:#dce9f7;display:grid;place-items:center}@media(max-width:600px){.layout{grid-template-columns:1fr;gap:20px;padding:16px}.layout h1{font-size:30px}}

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