Չափի միավորները css-ում
Բացարձակ չափի միավորներ
Այս տեսակին են պատկանում սանտիմետրը(cm), միլիմետրը(mm) և դյույմը(in):
Css-ի մեջ կսահմանվի հետևյալ կերպ՝
p {
font-size: 1cm;
}
p {
font-size: 1mm;
}
p {
font-size: 1in;
}
Օգտագործվում են, Երբ անհրաժեշտ է չափ սահմանել ֆիզիկական մակարդակով, օրինակ՝ էջի համար, որն անհրաժեշտ է տպել։
Տպագրական չափի միավորներ
Այս տեսակի չափի միավորներն են pt և pc -ն։
1pt-ն հավասար է 1.33px-ի, իսկ 1pc-ն՝ 16px-ի։
Սովորաբար սահմանվում են տպելու համար նախատեսված ոճում՝ տառատեսակների համար։
Css -ում կունենա հետևյալ տեսքը՝
p {
font-size: 1pt;
}
p {
font-size: 1pc;
}
Բացարձակ և տպագրական տեսակի չափի միավորները բրաուզերը վերասահմանում է պիքսելներով:
Հարաբերական չափի միավորներ
Այս տեսակին են պատկանում px-ը, %-ը, em-ը և rem-ը ։
PX
px-ը հիմնական չափի միավորն է վեբ դիզայնում։ Օգտագործվում է, երբ անհրաժեշտ է էլեմենտին ֆիքսված չափ սահմանել, որպեսզի այն նույնը լինի տարբեր չափի էկրաններում։
Մեկ px-ը հավասար է սարքավորման էկրանի վրա ֆիզիկական մեկ պիքսելին(եթե էկրանին մոտ նայենք կնկատենք պիքսելները)։
%
Դուստր էլեմենտի տոկոսը հաշվվում է ծնող էլեմենտի արժեքի հիման վրա։ Սովորաբար օգտագործվում է բլոկ տեսակի էլեմենտների համար, երբ անհրաժեշտ են դրանք ադապտիվ դարձնել(հարմարվող ծնող էլեմենտի չափերին)։
Օրինակ՝
div {
font-size: 175%;
}
p {
font-size: 60%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p>Hello World!!</p>
</div>
</body>
</html>
<p> էլեմենտի համար ծնող համարվում է <div>-ը։
div { font-size: 175%; } -Css-ում սիմվոլների չափի համար կանխադրված է(по умолчанию) 16px-ը։ Ուստի 16-ի 175 տոկոսը հավասար է 28px -ի(16×175/100=28):
Նույնն է ինչ՝
div { font-size: 28px };
<p>-ի font-size-ը կհաշվվի ծնողի՝ <div>-ի հիման վրա՝ 28×60/100=16.8px։
Նույնն է ինչ՝
p { font-size: 16.8px };
Արդյունքում «Hello World!!» տեքստի համար կսահմանվի 16.8 պիքսելը։
EM
Հիմնականում օգտագործվում է տառատեսակի համար, երբ անհրաժեշտ է պահպանել դրա մշտական հարաբերակցությունը ծնող էլեմենտի տառատեսակի չափին։
Օրինակ՝
div {
font-size: 1.2em;
}
p {
font-size: 3em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
</head>
<body>
<div>
Hello Div...
<p>Hello p-div</p>
</div>
<p>Hello p</p>
</body>
</html>
css -ում սիմվոլների համար կանխադրված է 16px-ը։
em -ը չափը որոշում է ծնող էլեմենտում նշված տառատեսակի չափով՝ այն բազմապատկելով իր արժեքի հետ։ Եթե սահմանված չէ ” font-size ” հատկությունը ապա չափը կվորոշվի տառատեսակի կանխադրված չափով(16px)։
<div>-ի font-size-ը հավասար է 1.2em-ի, ուստի՝ 16×1.2=19.2px։
<p> -ի font-size-ը հավասար է 3em-ի, ծնող էլեմենտինը՝ 19.2px -ի, ուստի՝ <div> -ում գտնվող <p> -ն հավասար կլինի՝ 19.2 x 3 = 57.6px-ի։
Առանձին <p>-ի չափը հավասար կլինի՝ 16×3=48px։
REM
em և rem չափման միավորներն ունեն տառատեսակին չափ սահմանելու տարբեր վերահսկամն կետեր։
em -ը չափը որոշում է՝ հիմնվելով ծնող էլեմենտի տառատեսակի չափի վրա։ rem -ի վերահսկման կետը անմիջապես <html> -ում սահմանված տառատեսակի չափն է։
em -ի օրինակ՝
li {font-size: 1.3em;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
</head>
<body>
<ul>
<li>
Տարբերակ 01
<ul>
<li>
Տարբերակ 02
<ul>
<li>
Տարբերակ 03
<ul>
<li>
Տարբերակ 04
<ul>
<li>
Տարբերակ 05
<ul>
<li>Տարբերակ 06</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Ամեն <li>-ի em չափը բազմապատկվել է իր ծնող <li>-ի չափի վրա։
Նմանատիպ իրավիճակից խուսափելու համար կօգտագործվի rem չափման միավորը, այսինքն ամեն դուստր <li> էլեմենտ իր em չափը կբազմապատկի անմիջապես հիմնական էլեմենտի` <html>-ի font-size-ի վրա։
Օրինակ՝
html {
font-size: 2em;
}
li {
font-size: 1.3rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
</head>
<body>
<ul>
<li>
Տարբերակ 01
<ul>
<li>
Տարբերակ 02
<ul>
<li>
Տարբերակ 03
<ul>
<li>
Տարբերակ 04
<ul>
<li>
Տարբերակ 05
<ul>
<li>Տարբերակ 06</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
ch
ch:– սահմանում է լայնություն ըստ « 0 » սիմվոլի լայնության։
input {
font-family: Courier, monospace;
padding: 5px 10px;
width: 8ch;
}
ex
ex: – սահմանում է բարձրություն ըստ « x » սիմվոլի բարձրության։
sub {
position: relative;
bottom: -1ex; /* սիմվոլները կիջնեն x սիմվոլի բարձրության չափով։ */
}
Սրանց փոխարեն սովորաբար օգտագործվում է em չափման միավորը։
Տեսադաշտի չափման միավորներ vw, vh, vmin, vmax:
vw, vh
vw -վերաբերում է տեսադաշտի լայնությանը, իսկ vh -ն՝ տեսադաշտի բարձրությանը։
Օրինակ տեքստի չափերը կարող է փոփոխվել ըստ տեսադաշտի՝ բրաուզերի պատուհանի լայնության փոփոխման vw -ի դեպքում և բարձրության փոփոխման՝ vh -ի դեպքում։
Օրինակ, եթե բրաուզերի պատուհանի լայնությունը հավասար է 500px-ի, իսկ font-size-ը՝ 2vw-ի, ապա տեքստի չափը հավասար կլինի (500×2) / 100 = 10px-ի։
Նույնը վերաբերում է vh-ին, որի դեպքում պետք է փոփոխվի բրաուզերի պատուհանի բարձրությունը։
Օրինակ՝
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style>
p {
font-size: 2vw;
}
</style>
</head>
<body>
<p>Hello World!!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style>
p {
font-size: 5vh;
}
</style>
</head>
<body>
<p>Hello World!!</p>
</body>
</html>
vmin vmax
Օրինակ՝ եթե բրաուզերի պատուհանի չափերը՝ լայնությունը հավասար է 650px-ի, իսկ բարձրությունը՝ 400px-ի, ապա vmin-ը կվերցնի սրանցից փոքրագույնը՝ 400px-ը, իսկ vmax-ը՝ մեծագույնը՝ 650px-ը։
Եթե font-size-ը հավասար է 4vmin-ի, ապա կվերցվի փոքրագույնը՝ 400px-ը և այն կբազմապատկվի 0.04 -ով․ արդյունքում տեքստի չափը կլինի՝ 400×0.04 = 16px-ի, կամ՝ 400×4/100=16px։
Css-ում կունենա հետևյալ տեսքը՝
p { font-size: 4vmin; };
Անկյան չափման միավորներ
Անկյան չափման միավորները սահմանում են էլեմենտի անկյան թեքությունը և պտույտը։
Դրական արժեքը աշխատում է ժամսլաքի ուղղությամբ, բացասականը՝ ժամսլաքի հակառակ ուղղությամբ։
Անկյունները կարող են սահմանվել հետևյալ չափման միավորներով՝
–deg(degree) չափման միավոր՝ ըստ աստիճանի։ Ամբողջ շրջանը հավասար է 360deg-ի։
–grad(gradian) չափման միավոր։ Ամբողջ շրջանը հավասար է 400grad-ի։
–rad(radian) չափման միավոր։ Ամբողջ շրջանը հավասար է 6.2832rad-ի։
–turn չափման միավոր։ Ամբողջ շրջանը հավասար է 1turn-ի։
.class01 {
background: orange;
height: 200px;
width: 200px;
transform: rotate(125deg);
margin: 100px 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style>
</style>
</head>
<body>
<div class="class01"></div>
</body>
</html>
Չափման միավորներ հնարավոր է սահմանել նաև հետևյալ տարբերակներով՝
p {
font-size: 0.394px;
}
p {
margin: -1px;
}
p {
font-size: 0;
} /* սա միայն 0-ի դեպքում․ կամ p { font-size: 0px; } */
Եթե չափման միավորից առաջ դրված է պրոբել, ապա սահմանումը չի աշխատի․
p { font-size: 10 px; }
Armenian 
Russian