Показать сообщение отдельно
  #1 (permalink)  
Старый 24.07.2012, 17:30
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Размеры шрифта и масштабирование
Как при масштабировании сохранять постоянным размер шрифта внутри блока с 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>

Последний раз редактировалось bes, 24.07.2012 в 18:00.
Ответить с цитированием