7.1 Əsas prinsiplər
Cavab verən şriftlər adaptiv veb-dizayn yaratmaq üçün önəmli rol oynayır. vw, vh, vmin və vmax kimi nisbi vahidlərin istifadəsi, mətnin müxtəlif cihazlarda optimal görünməsi üçün şriftlərin vewport ölçülərinə görə dinamik dəyişməsinə imkan verir. Gəlin bu vahidlərin necə işlədiyini və cavab verən şriftlərin yaradılmasında necə istifadə edilməli olduğunu daha ətraflı nəzərdən keçirək.
Əsas Konsepsiyalar
vw və vh:
vw(viewport width): 1 vahidvwvewportun eninin 1%-inə bərabərdirvh(viewport height): 1 vahidvhvewportun hündürlüyünün 1%-inə bərabərdir
vmin və vmax:
vmin(viewport minimum): 1 vahidvmin, vewportun kiçik ölçüsünün (ya eni ya da hündürlüyü) 1%-inə bərabərdirvmax(viewport maximum): 1 vahidvmax, vewportun böyük ölçüsünün (ya eni ya da hündürlüyü) 1%-inə bərabərdir
Cavab verən şriftlərin üstünlükləri:
- Oxunurluğun artırılması: şrift ölçüsü avtomatik olaraq ekran ölçülərinə uyğunlaşır və istənilən cihazda rahat oxumağı təmin edir
- Dizaynın çevikliyi: cavab verən şriftlər, vewport ölçülərini dəyişdikdə harmonik və balanslı dizaynı qorumağa kömək edir
- Vahid yanaşma: şriftlər üçün nisbi vahidlərin istifadəsi adaptiv dizayn yaratmaq üçün vahid yanaşmanı təmin edir
7.2 vw və vh istifadəsinə nümunələr
Nümunə 1: vw istifadə edərək əsas şrift ölçüsü
Şrift ölçüsünün viewport-un enindən asılı olaraq dəyişdiyi bir nümunə yaradaq:
body {
font-size: 2vw; /* Şrift ölçüsü viewport eni yüzdə 2-yə bərabərdir */
}
h1 {
font-size: 4vw; /* Başlıq şrift ölçüsü viewport eni yüzdə 4-yə bərabərdir */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vw istifadə edərək cavabdeh şrift</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Cavabdeh başlıq</h1>
<p>Bu mətn viewport-un enindən asılı olaraq ölçüsünü dəyişir.</p>
</body>
</html>
Kodun izahı:
body { font-size: 2vw; }:bodyiçindəki mətn üçün şrift ölçüsünü viewport eni yüzdə 2-yə bərabər edirh1 { font-size: 4vw; }:h1başlığı üçün şrift ölçüsünü viewport eni yüzdə 4-yə bərabər edir
Nümunə 2: vh istifadə edərək əsas şrift ölçüsü
İndi şrift ölçüsünün viewport-un hündürlüyündən asılı olaraq dəyişdiyi bir nümunə yaradaq:
body {
font-size: 2vh; /* Şrift ölçüsü viewport hündürlüyü yüzdə 2-yə bərabərdir */
}
h1 {
font-size: 4vh; /* Başlıq şrift ölçüsü viewport hündürlüyü yüzdə 4-yə bərabərdir */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vh istifadə edərək cavabdeh şrift</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Cavabdeh başlıq</h1>
<p>Bu mətn viewport-un hündürlüyündən asılı olaraq ölçüsünü dəyişir.</p>
</body>
</html>
Kodun izahı:
body { font-size: 2vh; }:bodyiçindəki mətn üçün şrift ölçüsünü viewport hündürlüyü yüzdə 2-yə bərabər edirh1 { font-size: 4vh; }:h1başlığı üçün şrift ölçüsünü viewport hündürlüyü yüzdə 4-yə bərabər edir
7.3 vmin və vmax istifadəsi nümunələri
Nümunə 1: vmin istifadə edərək əsas şrift ölçüsü
Viewport-un daha kiçik ölçüsündən asılı olaraq şrift ölçüsünü dəyişdirən bir nümunə yaradaq:
body {
font-size: 2vmin; /* Şriftin ölçüsü viewport-un daha kiçik ölçüsünün 2%-ə bərabərdir */
}
h1 {
font-size: 4vmin; /* Başlığın şrift ölçüsü viewport-un daha kiçik ölçüsünün 4%-ə bərabərdir */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vmin istifadə edərək cavab verən şrift</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Cavab verən başlıq</h1>
<p>Bu mətn viewport-un daha kiçik ölçüsündən asılı olaraq ölçüsünü dəyişir.</p>
</body>
</html>
Kodun izahı:
body { font-size: 2vmin; }:bodyiçindəki mətn üçün şrift ölçüsünü viewport-un daha kiçik ölçüsünün 2%-ə bərabər edirh1 { font-size: 4vmin; }:h1başlığı üçün şrift ölçüsünü viewport-un daha kiçik ölçüsünün 4%-ə bərabər edir
Nümunə 2: vmax istifadə edərək əsas şrift ölçüsü
Viewport-un daha böyük ölçüsündən asılı olaraq şrift ölçüsünü dəyişdirən bir nümunə yaradaq:
body {
font-size: 2vmax; /* Şriftin ölçüsü viewport-un daha böyük ölçüsünün 2%-ə bərabərdir */
}
h1 {
font-size: 4vmax; /* Başlığın şrift ölçüsü viewport-un daha böyük ölçüsünün 4%-ə bərabərdir */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vmax istifadə edərək cavab verən şrift</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Cavab verən başlıq</h1>
<p>Bu mətn viewport-un daha böyük ölçüsündən asılı olaraq ölçüsünü dəyişir.</p>
</body>
</html>
Kodun izahı:
body { font-size: 2vmax; }:bodyiçindəki mətn üçün şrift ölçüsünü viewport-un daha böyük ölçüsünün 2%-ə bərabər edirh1 { font-size: 4vmax; }:h1başlığı üçün şrift ölçüsünü viewport-un daha böyük ölçüsünün 4%-ə bərabər edir
GO TO FULL VERSION