Как бы вы делали страницу с кнопками «вверх-вниз», содержимое которой должно увеличиваться/уменьшаться по нажатию?
Здесь имеется в виду не встроенное масштабирование браузера, а масштабирование средствами CSS.
Пример такой страницы в ифрейме:
Какие единицы измерения выбрать для шрифта на странице: px, em, % или другие?
P.S. Подход должен быть применим и для создания масштабируемых графических компонент, т.е. в контексте одного элемента, а не всей страницы.
Нужно использовать либо % либо em.
Код примера из условия:
<body style="font-size:100%">
<script>
function scale(multi) {
*!*// умножает font-size body на multi*/!*
var s = document.body.style;
s.fontSize = parseInt(s.fontSize)*multi + '%';
}
</script>
<button onclick="scale(1.25)">Увеличить ↑</button>
<button onclick="scale(0.8)">Уменьшить ↓</button>
<hr>
<div style="font-size:125%">Увеличенный шрифт</div>
<div style="font-size:70%">Уменьшенный шрифт</div>
<h2>Заголовок</h2>
Здравствуйте!
</body>
По умолчанию, BODY в браузере имеет font-size:16px. Мы могли бы оставить этот размер в пикселях, так как он корневой, но для удобства поставим %.
Кнопка просто увеличивает размер шрифта BODY. Внутренние элементы имеют размеры в em/%, чтобы масштабироваться относительно него.
А что будет, если оставить где-то px (запустите и попытайтесь увеличить):
<body style="font-size:100%">
<script>
function scale(multi) {
var s = document.body.style;
s.fontSize = parseInt(s.fontSize)*multi + '%';
}
</script>
<button onclick="scale(1.25)">Увеличить ↑</button>
<button onclick="scale(0.8)">Уменьшить ↓</button>
<hr>
<div style="*!*font-size:20px*/!*">Увеличенный шрифт</div>
<div style="*!*font-size:12px*/!*">Уменьшенный шрифт</div>
<h2>Заголовок</h2>
Здравствуйте!
</body>
При увеличении-уменьшении BODY font-size, вы увидите, что, например. отступ вокруг HR увеличивается. Это потому, что он задан в em по умолчанию.
А строчки с размером, заданным в px, остануться такими как были.
Этот подход можно применить в рамках любого отдельно взятого компонента.