Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 8 из 53 · 13 мин
px, em, rem, %, vw, vh, dvh, ch и функции calc, min, max, clamp.
На телефоне заголовок в три строки, на ноутбуке — крошечный.
Пиксели одинаковы везде. Нужны относительные единицы и clamp — и заголовок сам подстроится.
pxrem.<style>
p { border: 1px solid #c8763a; padding: 8px; }
</style>
<p>Рамка 1px</p>rem1rem = размер шрифта html (обычно 16px).<style>
h1 { font-size: 2rem; } p { font-size: 1rem; }
</style>
<h1>2rem</h1><p>1rem</p>em1em = размер шрифта текущего элемента.<style>
button { font-size: 20px; padding: 0.5em 1em; }
</style>
<button>Отступы в em</button>%<style>
.half { width: 50%; background: #fdf6ec; }
</style>
<div class="half">50% ширины</div>vw · vh1vw — 1% ширины окна, 1vh — 1% высоты.<style>
.hero { height: 40vh; background: #6b3e26; color: white; }
</style>
<div class="hero">40% высоты окна</div>dvh100dvh учитывает выезжающую панель браузера на телефоне.<style>
.full { min-height: 30dvh; background: #fdf6ec; }
</style>
<div class="full">30dvh</div>ch1ch — ширина цифры «0» в шрифте.max-width: 65ch.<style>
p { max-width: 20ch; background: #fdf6ec; }
</style>
<p>Строка не длиннее двадцати символов</p>calc()calc(100% - 2rem).<style>
.box { width: calc(100% - 40px); background: #fdf6ec; }
</style>
<div class="box">100% минус 40px</div>min()min(100%, 600px) — не больше 600px, но и не шире родителя.<style>
.box { width: min(100%, 200px); background: #fdf6ec; }
</style>
<div class="box">min()</div>max()max(16px, 1vw) — не меньше 16px.<style>
p { font-size: max(16px, 1vw); }
</style>
<p>Не меньше 16px</p>clamp()clamp(минимум, желаемое, максимум): clamp(1.5rem, 5vw, 3rem).<style>
h1 { font-size: clamp(1.5rem, 6vw, 3rem); }
</style>
<h1>Резиновый заголовок</h1>Текст — в rem, мелкие рамки — в px, ширины — в % и min(), крупные заголовки — через clamp().
Задай h1 размер clamp(1.5rem, 5vw, 3rem), а абзацам — max-width: 65ch.
h1 через clamp() — пока нет65ch — пока нетВыберите один ответ.
От чего считается 1rem?
Выберите один ответ.
Что делает clamp(1rem, 4vw, 2rem)?
Проверяем состояние обучения…