24.07.2012, 17:30
|
 |
Профессор
|
|
Регистрация: 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.
|
|
24.07.2012, 18:05
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
bes,
Мож тупо менять проценты в <style id=Font> #ThisDiv{font-size:98%;}</style> ?
*Щас набросяцо c рекомендацией делать через computedStyle
|
|
24.07.2012, 19:30
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от Deff
|
bes,
Мож тупо менять проценты в <style id=Font> #ThisDiv{font-size:98%;}</style> ?
*Щас набросяцо c рекомендацией делать через computedStyle
|
Deff, по какому алгоритму их менять?
font-size в % - это % от font-size родителя, а при масштабировании шрифт родителя также масштабируется.
Сам пиксель масштабируется и та полоска в 10%, которая всегда одного размера на экране, при увеличении масштаба занимает всё меньше пикселей. |
|
24.07.2012, 20:00
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от bes
|
font-size в % - это % от font-size родителя, а при масштабировании шрифт родителя также масштабируется.
Сам пиксель масштабируется и та полоска в 10%, которая всегда одного размера на экране, при увеличении масштаба занимает всё меньше пикселей.
|
Ну обернуть все масштабируемые дивы общим чем-то и выставить там конкретную пиксельную цифру - а для конктретного див - менять в своём теге style |
|
24.07.2012, 20:29
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от Deff
|
|
Ну обернуть все масштабируемые дивы общим чем-то и выставить там конкретную пиксельную цифру - а для конктретного див - менять в своём теге style
|
Я и такой вариант пробовал, но пиксель-то масштабируется, поэтому при масштабировании, например, 10px всегда разного размера на экране, а вот полоска в 10% всегда одного.
Deff, и не понятно, что имелось в виду под "менять проценты", надо же как-то рассчитать на сколько менять. |
|
24.07.2012, 20:34
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от bes
|
|
Я и такой вариант пробовал, но пиксель-то масштабируется, поэтому при масштабировании, например, 10px всегда разного размера на экране, а вот полоска в 10% всегда всегда одного.
|
Ну ти жа в процентах ставить будешь на div ?
а начальный размер вродь как абсолютный на родителе ? (Или ? |
|
24.07.2012, 20:51
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от Deff
|
Ну ти жа в процентах ставить будешь на div ?
а начальный размер вродь как абсолютный на родителе ? (Или ?
|
font-size в % не работает, если на родителе font-size в %, а если в px, то мешает масштабирование самих пикселей.
Чёт я уже запутался, можно пример на основе моего примера. |
|
24.07.2012, 21:09
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от bes
|
|
font-size в % не работает, если на родителе font-size в %,
|
Странно - Вот у мну 7лет как в % шрифт на body и на последующем дочернем блоке (проценты в итоге перемножаются |
|
24.07.2012, 21:36
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от Deff
|
|
Странно - Вот у мну 7лет как в % шрифт на body и на последующем дочернем блоке (проценты в итоге перемножаются
|
здесь пардон 
Тем не менее вся %-ая цепочка, завязана на текущий размер шрифта документа, то есть на СSS-пиксели (которые масштабируются), а вот высота в процентах по ходу завязана на пиксели устройств, поэтому при масштабировании не изменяется.
Не картинки же со словами вместо самих слов ставить |
|
24.07.2012, 22:24
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
bes,
Ну достаточно просто эти проценты в стиле div - делить на проценты уменьшения масштаба - тады(ксать проценты могут быть дробные - видал и сам ставил до трех знаков после точки)
Тогда вродь размер должен сохраняцо несмотря на первое пиксельное задание
|
|
|
|
