3

Доброго времени суток.

Возникла необходимость реализовать резиновый текст. Есть резиновый блок 

min-width: 300px;
max-width: 700px;

В нем написан текст размером в 28 пикселей в одну строчку. Необходимо сделать так, чтобы при уменьшении экрана также вместе с резиновым блоком уменьшался бы размер шрифта, при этом текст также должен быть написан в одну строчку.

Ссылка на jsfiddle.

Если это невозможно реализовать через обычный html и css то прошу помочь небольшим js скриптом.

Прошу вашей помощи в реализации данного вопроса.

Pavel Durmanov
  • 5,756
KeH192
  • 159
  • 4
    вы конечно уже выбрали лучший ответ , но вот пример https://jsfiddle.net/ubhqwzb3/ смотрите - сколько кода лишнего в примерах ниже –  Jan 17 '16 at 02:32

4 Answers4

10

Вариант еще проще я встретил вот здесь: Можно ли сделать резиновый шрифт в css?

.connect p {
    font-size: 3vw; /* 3% of viewport width */
}
Петр Варягин
  • 410
  • 1
  • 4
  • 13
5

Это возможно сделать средствами css. Демонстрация работы

<div class="connect">
    <p>Небольшой текст написанный в одну строчку</p> 
</div>

@media screen and (min-width: 700px) {
    .connect p {
        font-size: 28px;
    }
}

@media screen and (min-width: 600px) and (max-width: 699px) {
    .connect p {
        font-size: 25px;
    }
}


@media screen and (min-width: 500px) and (max-width: 599px) {
    .connect p {
        font-size: 21px;
    }
}


@media screen and (min-width: 300px) and (max-width: 499px) {
    .connect p {
        font-size: 14px;
    }
}
VenZell
  • 19,872
4

Ну как-то так.

$(window).resize(function(){
    var text = $(".connect p"),
        currentWidth = parseInt(text.css("width")),
        newWidth = 28;

    if(currentWidth==700) newWidth = 28;
        else if (currentWidth<700 && currentWidth>=600) newWidth = 25;
        else if (currentWidth<600 && currentWidth>=500) newWidth = 21;
        else if (currentWidth<500 && currentWidth>=300) newWidth = 16;

    text.css("font-size",newWidth+"px");
});

Правда вам надо будет придумать, как вычислить эти самые новые пиксели. Ведь разные шрифты имеют разный размер букв и надо тогда считать количество символов, считать ширину строки из них и подгонять под них размер шрифта.

Pavel Durmanov
  • 5,756
Alex Krass
  • 17,744
  • 1
    Небольшой upgrade и теперь текст, сразу при загрузке страницы, идет в одну строку. – alvoro Jul 03 '14 at 00:58
  • @Alex Krass, спасибо огромное за помощь, но вот скажите, возможно ли через javascript реализовать следующее: Есть разрешения экрана с 1280px до 760 необходимо чтобы каждые 20 пикселей изменения размера экрана также менялся размер текста на 0.5px

    На вашем примере надо прописывать каждый промежуток: else if (currentWidth<700 && currentWidth>=680) newWidth = 25;

    else if (currentWidth<680 && currentWidth>=660) newWidth = 24.5; и т.д.

    Возможно ли это как то сделать циклом? Я в javascript вообще 0 :( Прошу вашей помощи. Заранее спасибо!

     – KeH192 Jul 03 '14 at 10:29
  • @KeH192, можно вывести зависимость и от нее считать: http://jsfiddle.net/cL8je/1/ 
        newFontSize = newFontSize - ((maxWidth - currentWidth)/20)*0.5;
    – Alex Krass Jul 03 '14 at 16:19
  • @Alex Krass, благодарю, но почему то при интеграции данного скрипта получилось вот такое: http://filebeam.com/2e5b750003292de40369efc42aa998c2.jpg

    У меня файл стилей подключен в другом файле. Скрипт вставил в шапку. Но почему то он посчитал все в 2.9 пикселя :)

     – KeH192 Jul 03 '14 at 21:05
  • @KeH192, данный форум больше рассчитан на помощь, с расчетом на то, что по примеру человек сам сможет адаптировать скрипт под свои нужды. Как Вы выразились, Вы в javascript вообще 0, поэтому наверно не понимаете, как он работает. В данном случае указаны min- и max-width на основе которых он считает(у вас их нет). Если брать экран, то надо его значения подставлять, просто так использовать данный скрипт под другую задачу не получится, надо его адаптировать. Для экрана так: http://jsfiddle.net/x7UgP/ И скрипт все равно еще не идеален и может Вам не подойти без дальнейшего усовершенствования. – Alex Krass Jul 05 '14 at 11:43
1

Петр Варягин дал конкретный и простой ответ, но при значительном уменьшении размера окна шрифт может стать плохо различимым. Поэтому предлагаю сделать как использую я в своих проектах, учитывая, что тут можно еще задать первичный опорный размер, если при малой ширине шрифт плохо читаемый. при этом сначала удобно выставить нужные значения на минимально возможном размере отображения, а затем подгонять коэффициент на максимальном, повторяя при необходимости.

.connect p {
    font-size: calc(5px + 3vw); /* 5px is first minimal base size. and 3% of viewport width */
}

если важна совместимость со старыми версиями браузеров тут можно посмотреть https://caniuse.com/#search=calc()

romanown
  • 319