Динамическое изменение размера текста на основе ширины контейнера - PullRequest
Новая
       37

Динамическое изменение размера текста на основе ширины контейнера

1 голос
/ 10 февраля 2012

Я работаю над адаптивным дизайном, и у меня есть некоторые отображаемые теги <h3>, которые я хотел бы уменьшить при уменьшении ширины окна браузера.

Первоначальная настройка, основанная наширина 960px:

  1. Размер шрифта основного текста установлен в 14px
  2. Размер шрифта тега h3 составляет 40px
  3. Ширина содержащего элемента div230px

Итак, вот что я разработал для javascript / jQuery: 

$(window).resize(function(){
    var containerSize = $('.container').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    $('.container h3').css(fontSize,textEms+"em");
});

Мои навыки javscript, очевидно, весьма ограничены, поэтому я надеялся, что вы поможете мне получить этовсе чистят и работают правильно.Я думаю, что функция $(window).resize - неправильное событие, так как текст должен изменяться автоматически при загрузке страницы, а не только при изменении размера окна.

Заранее спасибо за помощь!

ПримечаниеЯ не хочу, чтобы текст растягивался по краям контейнеров, поэтому я не использую FitText.js или BigText.js.

Ответы [ 3 ]

4 голосов
/ 10 февраля 2012

window.resize - правильное событие, но оно не срабатывает при загрузке страницы.Однако вы можете просто добавить .trigger('resize') к своему коду, чтобы он запускался при загрузке страницы: 

$(window).bind('resize', function(){
    var containerSize  = $('.container').width(),
        textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
        textRatio      = containerSize * textPercentage,
        textEms        = textRatio / 14;

    $('.container h3').css(fontSize, textEms+"em");
}).trigger('resize');

Вы захотите запустить этот код после document.ready, чтобы убедиться, что ширина, которую вы получаетедля контейнера это правильно.Вы также можете разместить этот код внизу вашего HTML-документа (что вы должны делать с обработчиком событий document.ready или без него), что обеспечит доступность элементов при запуске этого кода: 

//wait for `document.ready` to fire
$(function () {

    //cache the .container and H3 elements
    var $container = $('.container'),
        $h3        = $container.find('h3');

    //bind event handler to `window.resize`
    $(window).bind('resize', function(){

        //get the width of the container
        var containerSize  = $container.width(),
            textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
            textRatio      = containerSize * textPercentage,
            textEms        = textRatio / 14;

        $h3.css('fontSize', textEms+"em");
    }).trigger('resize');
});

Обратите внимание, что я кэшировал элемент (ы) H3, поэтому его / затем не нужно выбирать для каждого события resize, потому что, когда вы на самом деле изменяете размер своего браузера, возникает множество этих событий, которые запускаются.

1 голос
/ 10 февраля 2012

Вы можете попробовать это. 

$(window).resize(function(){
    var containerSize = $('.container').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    //fontSize should be enclosed in quotes
    $('.container h3').css('fontSize', textEms+"em");
})
.resize();//Triggers the resize on page load to set the font size
0 голосов
/ 25 апреля 2013

Для людей, которые находят это, прибегая к помощи чего-то вроде «отзывчивого размера шрифта», это может помочь:

https://github.com/davatron5000/FitText.js

Это плагин jQuery, который устанавливает размер шрифтав зависимости от ширины контейнера.У него также есть несколько вариантов получения желаемых результатов.

PS: Конечно, он также масштабирует ваш текст при изменении размера окна.

...