Junior
Дар CSS кадом воҳидҳои андоза мавҷуданд?
sobes.tech AI
Ҷавоб аз AI
Абсолютные и относительные.
| Төрү | Берәмек | Тасвирлама |
|---|---|---|
| Абсолютные | px |
Пиксельләр, экран рөхсәтенә бәйле. |
pt |
Пунктлар, 1/72 дюйм. | |
cm |
Сантиметрлар. | |
mm |
Миллиметрлар. | |
in |
Дюймнар, 1 дюйм = 2.54 см. | |
pc |
Пика, 1 пика = 12 пункт. | |
| Хисапсыз | em |
Әти-әни элементның шрифт зурлыгына карап. |
rem |
Төп элементның (html) шрифт зурлыгына карап. |
|
vw |
Вьюпорт киңлегенең 1% карап. | |
vh |
Вьюпорт биеклегенең 1% карап. | |
vmin |
Вьюпортның иң кыска ягының 1% карап (киңлек яки биеклек). | |
vmax |
Вьюпортның иң озын ягының 1% карап (киңлек яки биеклек). | |
% |
Әти-әни элементның (яки эчтәлекле блок) зурлыгына карап. | |
ch |
Актуаль шрифтның '0' символының киңлегенә карап. | |
ex |
Актуаль шрифтның хәрефләренең биеклегенә карап (x-биеклек). |
Берәмек сайлау контекстка бәйле: px еш кына чигләр һәм растрлы рәсемнәр өчен кулланыла, rem һәм em — шрифтлар һәм аралар өчен, масштаблауны яхшырту өчен. Процентлы кыйммәтләр җаваплы дизайн өчен файдалы.
/* Мисал куллану */
.container {
width: 80%; /* Әти-әнигә карап */
margin: 1rem auto; /* `html` шрифт зурлыгына карап */
}
.box {
padding: 20px; /* Абсолют бәясе */
font-size: 1.2em; /* Әти-әни шрифт зурлыгына карап */
width: 50vw; /* Вьюпорт киңлегенә карап */
}