4.1 Faiz dəyərləri
Faiz dəyərləri və nisbi vahidlər CSS-də elastik və cavab verən dizaynların yaradılmasında mühüm rol oynayır. Onlar elementlərin müxtəlif ekran ölçülərinə və dəyişən şərtlərə uyğunlaşmasına imkan verir, daha yaxşı uyğunlaşma və istifadə rahatlığı təmin edir.
Faiz dəyərləri elementlərin ölçülərini onların valideyn elementlərinin ölçülərinə nisbətən təyin etmək üçün istifadə olunur. Bu, dizaynı daha elastik və uyğunlaşa bilən edir.
% istifadə nümunəsi:
.container {
width: 80%;
margin: 0 auto;
background-color: #f4f4f4;
}
.box {
width: 50%;
padding-top: 25%; /* Tərəf nisbəti 1:2 */
background-color: #3498db;
color: white;
text-align: center;
position: relative;
}
.box::before {
content: "";
display: block;
padding-top: 50%; /* Tərəf nisbəti 2:1 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>% istifadə nümunəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="min-height: 200px;">
<div class="container">
<div class="box">Kontent</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>% istifadə nümunəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Kontent</div>
</div>
</body>
</html>
Kodun izahı:
.container: konteynerin eni valideyn elementin eninin 80%-i kimi təyin edilir, onumargin: 0 autoilə mərkəzləşdirir.box: blokun eni konteynerin eninin 50%-i kimi təyin edilir. Blokun hündürlüyüpadding-topvasitəsilə təyin edilir ki, bu da 1:2 tərəf nisbəti təmin edir
4.2 Nisbət vahidləri (em və rem)
em vahidi — valideyn elementinin şrift ölçüsündən asılı olan nisbətli vahiddir. Əgər valideynin şrift ölçüsü dəyişərsə, em qiymətləri də dəyişir.
em-dən istifadə nümunəsi:
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 * 16px = 24px */
padding: 1em; /* 1 * 16px = 16px */
}
rem vahidi — kök elementin (html) şrift ölçüsündən asılı olan nisbətli vahiddir. O, valideyn elementlərdən asılı deyil ki, bu da onu daha proqnoz edilən və miqyaslana bilən dizaynlar üçün rahat edir.
rem-dən istifadə nümunəsi:
<div class="container">
Konteynerin içindəki bir mətn
<div class="box">
Qutunun içindəki bir mətn
</div>
</div>
html {
font-size: 16px;
}
.container {
font-size: 1rem; /* 16px */
padding: 2rem; /* 32px */
}
.box {
font-size: 1.5rem; /* 24px */
margin: 1rem; /* 16px */
}
em və rem müqayisəsi:
em: valideyn elementin şrift ölçüsündən asılıdır, bu isə dərinliklərdə kaskad effektinə səbəb ola bilərrem: kök elementin (html) şrift ölçüsündən asılıdır, bu da onu daha proqnoz edilən və istifadəsi asan edir
4.3 % ilə birləşdirilmiş istifadəsi
Nisbətli vahidlərin (em və rem) faizlə birlikdə istifadəsi elastik və adaptiv layoutlar yaratmağa imkan verir ki, bunlar istənilən cihazda düzgün görünəcək.
Nümunə: % ilə birləşdirilmiş istifadəsi
Faizlər və nisbətli vahidlərdən istifadə edərək elementlərin ölçülərinin təyin edildiyi bir layout yaradaq.
html {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
.header, .footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
.content {
display: flex;
gap: 1rem;
margin: 1rem 0;
}
.sidebar {
flex: 1 1 30%;
background-color: #f4f4f4;
padding: 1rem;
}
.main {
flex: 1 1 70%;
background-color: #e4e4e4;
padding: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>% və nisbətli vahidlərin birləşdirilmiş istifadəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">Başlıq</div>
<div class="content">
<div class="sidebar">Yan panel</div>
<div class="main">Əsas məzmun</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Kodun izahı:
html: bütün sənəd üçün əsas şrift ölçüsünü təyin edir.container: konteynerin eni üçün faizlərdən istifadə edir və onu səhifənin ortasında mərkəzləşdirir.headervə.footer: paddinglərdəremistifadə edir ki, bu da onları daha proqnozlaşdırılan edir.content: Yan panel və əsas məzmunu aralarındakı məsafə ilə birlikdə yerləşdirmək üçün Flexbox istifadə edir.sidebarvə.main: sütunların eni üçün faizlərdən vəremilə paddinglərdən istifadə edir
GO TO FULL VERSION