Единица rem: смесь px и em
Единица rem: смесь px и em
Размеры шрифтов на веб-страницах играют ключевую роль в создании удобочитаемого и эстетически приятного контента. Выбор правильных единиц измерения для задания размеров шрифтов является важным шагом в веб-разработке.
Иногда возникает потребность создать кнопки, которые будут увеличивать или уменьшать размер шрифта при помощи JavaScript. Хотя в браузерах часто есть горячие клавиши для изменения масштаба, такие как Ctrl++, они изменяют размер всей страницы, включая изображения и другие элементы, что может быть неудобно. Как быть, если нужно изменить только размер шрифта, чтобы обеспечить более комфортное чтение?
Для этого обычно используются единицы измерения em и %. Однако при вложенных элементах, таких как в примере с вложенным списком <li>, применение em или % может вызвать проблемы:
<style>
li {
font-size: 0.8em;
}
</style>
<ul>
<li>Лошадь
<ul>
<li>может быть
<ul>
<li>грациозной
<ul>
<li>только
<ul>
<li>или
<ul>
<li>могущественной
<ul>
<li>в зависимости от характера</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Здесь каждый вложенный <li> получает размер шрифта 80% от размера его родителя, что может сделать текст нечитаемым.
Для решения этой проблемы предлагается использовать единицу rem, которая устанавливает размер шрифта относительно размера шрифта элемента <html>. Это позволяет избежать проблем с вложенными элементами:
<style>
html {
font-size: 14px;
}
li {
font-size: 0.8rem;
}
</style>
<ul>
<li>Лошадь
<ul>
<li>может быть
<ul>
<li>грациозной
<ul>
<li>только
<ul>
<li>или
<ul>
<li>могущественной
<ul>
<li>в зависимости от характера</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Таким образом, базовый размер шрифта для <html> установлен на 14px, а размер шрифта для <li> устанавливается в 80% от базового размера при помощи rem.
Дополнительно, можно добавить интерактивность с помощью JavaScript, чтобы создать кнопку "Шрифт больше", которая динамически увеличивает размер шрифта элемента <html> на 2px при каждом нажатии:
<script>
let html = document.documentElement;
up.onclick = function() {
html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
};
</script>Таким образом, использование rem позволяет более гибко управлять размером шрифта, а JavaScript добавляет функциональность для динамического изменения размера шрифта по запросу пользователя.
А теперь давайте погрузимся в более интересныый пример.
<style>
html {
font-size: 14px;
}
li {
font-size: 0.8rem;
}
</style>
<div><button id="up">Кликните, чтобы увеличить размер шрифта</button></div>
<img src="https://cnnespanol.cnn.com/wp-content/uploads/2018/08/caballos-riendo-expresiones-faciales.jpg?quality=100&strip=info">
<ul>
<li>Лошадь
<ul>
<li>может быть
<ul>
<li>грациозной
<ul>
<li>только
<ul>
<li>или
<ul>
<li>могущественной
<ul>
<li>в зависимости от характера</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
let html = document.documentElement;
up.onclick = function() {
// при помощи JS увеличить размер шрифта html на 2px
html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
};
</script>
- Текст, включая вложенные элементы <li>, будет увеличиваться на 2px при каждом клике на кнопку.
- Изображение лошади останется без изменений, так как его размер не зависит от размера шрифта.
Таким образом, использование JavaScript позволяет динамически управлять размером шрифта, создавая интерактивный пользовательский опыт на основе заданных стилей.
Важный факт: Помимо удобства использования rem для размеров шрифта, следует отметить, что эта единица также обладает преимуществом в том, что она не зависит от размера шрифта родительского элемента, в отличие от em. Это делает rem особенно полезным для создания стабильных и предсказуемых размеров шрифта в проектах с различной вложенностью элементов.
Пример:
<style>
html {
font-size: 16px; /* Установка базового размера шрифта */
}
h1 {
font-size: 2rem; /* Размер заголовка в два раза больше базового */
}
</style>В этом примере размер заголовка h1 устанавливается в два раза больше базового размера шрифта <html>, что делает его более читаемым и предсказуемым для пользователя.
Заключение
При создании динамических и адаптивных веб-страниц, где важно поддерживать читаемость при изменении размеров шрифтов, использование rem является эффективным решением. Эта единица измерения не только предоставляет удобство в управлении размерами, но и обеспечивает стабильность в различных частях проекта.
Будьте первым