Как изменить размер шрифта пропорционально размеру div

Я пытаюсь создать веб-сайт, на котором размер страниц изменяется на размер окна на лету. В то время как мы можем получить изображения и тому подобное для автоматического изменения размера в процентах от размера div. Кажется, мы не можем изменить размер текста внутри div до относительного % контейнера.

Эта функция должна работать при изменении размера самого окна браузера без необходимости обновления страницы.

Сайт простой и использует js, css, html. Самый простой метод будет оценен по достоинству, но любое решение фантастично.

Спасибо


javascript text html autoresize css
person user1116779    schedule 26.12.2011    source источник
comment
не могли бы вы опубликовать свой код, чтобы я мог попытаться заставить его работать на вас?   -  person Michael Rader    schedule 27.12.2011

Ответы (4)


arrow_upward
2
arrow_downward

Приготовил пример настройки размера шрифта при изменении размера div. Использование процента в родительском div и настройка размера шрифта должны помочь.

http://jsfiddle.net/744A2/

person Calvin    schedule 28.12.2011

arrow_upward
2
arrow_downward

Таким образом, вы можете использовать screen.availHeight для вычисления постоянного значения, которое вы можете умножить на размер шрифта.

window.onload = function () {
    document.body.style.fontSize = (Math.ceil(screen.availHeight * parseInt(document.body.style.fontSize) / 600) + 'px';
}
person alisher.abdusattorov    schedule 10.04.2012

arrow_upward
1
arrow_downward

Как насчет использования медиа-запросов?

person powerbuoy    schedule 26.12.2011

arrow_upward
0
arrow_downward

даже используйте % для текста. http://w3schools.com/cssref/css_units.asp

person Deept Raghav    schedule 26.12.2011
comment
к сожалению, это не работает, потому что с размером шрифта он устанавливает его как Устанавливает размер шрифта в процентах от размера шрифта родительского элемента. Мне нужно, чтобы это было% самого родительского элемента. Но я ценю это предложение. - person user1116779; 27.12.2011
comment
если вы используете% age для ширины div. затем он также автоматически настраивает текст. - person Deept Raghav; 27.12.2011