Չափի միավորները css-ում
Բացարձակ չափի միավորներ
К этому типу относятся сантиметры (см), миллиметры (мм) и дюймы (дюймы).
В css это будет определено как:
p {
font-size: 1cm;
}
p {
font-size: 1mm;
}
p {
font-size: 1in;
}
Они используются, когда необходимо определить размер на физическом уровне, например, количество страниц, которые необходимо распечатать.
Տպագրական չափի միավորներ
Единицы этого типа имеют размер pt и: pc -ն.
1pt равен 1,33 пикселя, а 1pc — 16 пикселей.
Обычно устанавливается в печатном стиле шрифтов.
В CSS это будет выглядеть так:
p {
font-size: 1pt;
}
p {
font-size: 1pc;
}
Абсолютные единицы размера и размера печатного шрифта переопределяются браузером в пикселях.
Հարաբերական չափի միավորներ
px, %, em и rem относятся к этому типу.
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>Привет, мир!!</p>
</div>
</body>
</html>
<p> считается родителем элемента <div>тот
div { font-size: 175%; } — Размер символов по умолчанию в CSS — 16 пикселей. Следовательно, 175 процентов от 16 равны 28 пикселей (16×175/100=28).
такой же как
div { font-size: 28px };
<p>размер шрифта будет рассчитываться на основе родительского <div>исходя из: 28×60/100=16,8 пикселей.
такой же как
p { font-size: 16.8px };
В результате «Привет, мир!!» Для текста будет установлено 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>
Привет, Див...
<p>Привет, p-div</p>
</div>
<p>Привет п</p>
</body>
</html>
16 пикселей — значение по умолчанию для символов в CSS.
em определяет размер шрифта, указанного в родительском элементе, он умножив на его стоимость. Если свойство «font-size» не установлено, то размер будет установлен на размер шрифта по умолчанию (16 пикселей).
<div>размер шрифта равен 1,2em, поэтому 16×1,2=19,2 пикселей.
<p> размер шрифта равен 3em, родительский элемент 19,2 пикселей, поэтому: <div> находится в <p> будет равен 19,2 х 3 = 57,6 пикселей.
В отдельности <p>будет равно: 16×3=48px.
REM
em և rem չափման միավորներն ունեն տառատեսակին չափ սահմանելու տարբեր վերահսկամն կետեր։
em определяет размер на основе размера шрифта родительского элемента. немедленно снять контрольно-пропускной пункт <html> — это размер шрифта, определенный в .
это онапример:
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>
Аминь
Во избежание подобной ситуации будет использоваться rem единица измерения, то есть каждая дочь <li> элемент умножит свой размер em непосредственно на родительский элемент <html>по размеру шрифта
Например:
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 и изменение высоты в случае с вх.
Например, если ширина окна браузера равна 500 пикселей, а размер шрифта равен 2vw, то размер текста будет равен (500×2)/100 = 10 пикселей.
То же самое относится и к vh, и в этом случае следует изменить высоту окна браузера.
Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style data-no-auto-translation="">
p {
font-size: 2vw;
}
</style>
</head>
<body>
<p>Привет, мир!!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style data-no-auto-translation="">
p {
font-size: 5vh;
}
</style>
</head>
<body>
<p>Привет, мир!!</p>
</body>
</html>
vmin vmax
Например, если размеры окна браузера составляют 650 пикселей по ширине и 400 пикселей по высоте, vmin возьмет наименьшее из них, 400 пикселей, а vmax — самое большое, 650 пикселей.
Если размер шрифта равен 4вмин:, то будет взято наименьшее значение 400 пикселей и умножено на 0,04. результирующий размер текста будет 400×0,04 = 16 пикселей или 400×4./100=16 пикселей.
В CSS это будет выглядеть так:
p { font-size: 4vmin; };
Անկյան չափման միավորներ
Угловые единицы определяют угол наклона и поворота элемента.
Положительное значение работает по часовой стрелке, отрицательное значение — против часовой стрелки.
Углы могут быть определены в следующих единицах измерения:
-deg(degree) единица измерения градус. Весь круг равен 360 град.
-grad(gradian) единица измерения. Весь круг равен 400 градусам.
-rad(radian) единица измерения. Весь круг равен 6,2832 рад.
-turn единица измерения. Весь круг равен 1 обороту.
.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 data-no-auto-translation="">
</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; }
Russian 
Armenian