Как при масштабировании сохранять постоянным размер шрифта внутри блока с height, заданной в %?
Так как, на мой взгляд, средствами CSS данную задачу не решить, использую js.
Но есть два узких места:
1)
старые IE масштабируют по-другому, поэтому в них не работает (в IE вообще не работает)
2) управлять размером шрифта приходится через доли высоты (см. закомментированную строчку)
Может кто знает лучше решение?
<body style="margin: 0px; padding: 0px;">
<div id="div" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 10%; background: gray">text</div>
<div style="position: absolute; top: 10%; left: 0px; width: 100%; height: 90%; background: lightgrey">text</div>
<script>
window.onload = function () {
var div = document.getElementById('div');
function setFontSize() {
var coords = div.getBoundingClientRect();
var h = coords.bottom - coords.top;
div.style.fontSize = h - parseInt(h/8)+ 'px'; //изменяем размер
}
setFontSize();
window.onresize = function () {
setFontSize();
}
}
</script>
Через scrollHeight наверное проще (в хроме не работает)
<body style="margin: 0px; padding: 0px;">
<div id="div" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 10%; background: gray">text</div>
<div style="position: absolute; top: 10%; left: 0px; width: 100%; height: 90%; background: lightgrey">text</div>
<script>
window.onload = function () {
var div = document.getElementById('div');
function setFontSize() {
var h = div.scrollHeight;
div.style.fontSize = h - parseInt(h/8)+ 'px'; //изменяем размер
}
setFontSize();
window.onresize = function () {
setFontSize();
}
}
</script>