3

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

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

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

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

Ссылка на jsfiddle.

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

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

1
  • 4
    вы конечно уже выбрали лучший ответ , но вот пример jsfiddle.net/ubhqwzb3 смотрите - сколько кода лишнего в примерах ниже
    – user33274
    17 янв 2016 в 2:32

4 ответа 4

10

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

.connect p {
    font-size: 3vw; /* 3% of viewport width */
}
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;
    }
}
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");
});

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

5
  • 1
    Небольшой upgrade и теперь текст, сразу при загрузке страницы, идет в одну строку.
    – alvoro
    3 июл 2014 в 0: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
    3 июл 2014 в 10:29
  • @KeH192, можно вывести зависимость и от нее считать: jsfiddle.net/cL8je/1 newFontSize = newFontSize - ((maxWidth - currentWidth)/20)*0.5;
    – Alex Krass
    3 июл 2014 в 16:19
  • @Alex Krass, благодарю, но почему то при интеграции данного скрипта получилось вот такое: filebeam.com/2e5b750003292de40369efc42aa998c2.jpg У меня файл стилей подключен в другом файле. Скрипт вставил в шапку. Но почему то он посчитал все в 2.9 пикселя :)
    – KeH192
    3 июл 2014 в 21:05
  • @KeH192, данный форум больше рассчитан на помощь, с расчетом на то, что по примеру человек сам сможет адаптировать скрипт под свои нужды. Как Вы выразились, Вы в javascript вообще 0, поэтому наверно не понимаете, как он работает. В данном случае указаны min- и max-width на основе которых он считает(у вас их нет). Если брать экран, то надо его значения подставлять, просто так использовать данный скрипт под другую задачу не получится, надо его адаптировать. Для экрана так: jsfiddle.net/x7UgP И скрипт все равно еще не идеален и может Вам не подойти без дальнейшего усовершенствования.
    – Alex Krass
    5 июл 2014 в 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()

2
  • надо учитывать, что calc не везде поддерживается htmlbook.ru/css/calc 27 июл 2020 в 19:00
  • тут немного другие данные. перечислено практически все достаточно современное, кроме опера мини. ссылка
    – romanown
    26 авг 2020 в 8:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.