автоматический изменяют размер текста (размер шрифта) при изменении размеров окна?
Я пытался (напрасно) создать страницу, элементы которой изменили бы размер, когда я изменил размер окна. У меня есть он работающий в CSS на изображения без проблем, но я, может казаться, не выполняю то же для текста, и я не уверен, что это даже возможно в CSS. И я, может казаться, не нахожу сценарий jQuery, который выполняет это.
Когда пользователь изменяет размер окна, я по существу хочу, чтобы страница масштабировалась динамично и жидко без пользователя, имеющего необходимость вызвать масштабирование страницы. Это хорошо работает на моих img отделениях с помощью CSS, но не для текста, который остается таким же размер.
Какие-либо идеи?
2 ответа
Мне приходилось делать это самому. Что я сделал, так это то, что я установил базовый размер текста для основного текста и проценты для всех остальных размеров. Затем я использовал простой скрипт jQuery, чтобы изменить базовый размер при изменении размера окна. Затем обновляются и другие размеры.
Я использовал что-то вроде этого:
$(function() {
$(window).bind('resize', function()
{
resizeMe();
}).trigger('resize');
});
и в функции resizeMe у меня было это:
//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;
var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);
Вы можете сделать это с помощью CSS3 media queries, указывая различные базовые размеры шрифта в зависимости от размера браузера. Для этого есть хорошая статья на A List Apart
Для поддержки IE вы можете использовать CSS выражения
Это требует использования фиксированного базового размера шрифта, например, в теге body, и размеров в процентах или em в других местах.