1

Есть три параграфа и js код, который меняет размер текста относительно родителя, проблема в том, что он меняет размер всех трех параграфов непропорционально (то есть размер шрифта всех 3х параграфов становиться идентичным). А мне нужно что бы все три параграфа сохранили свои пропорции.

function changeSize(){
    var fontSize = parseInt($(".caption").width()/30)+"px";
    $(".caption div :nth-child(1)").css('font-size', fontSize);  
}
$(document).ready(function() {
    changeSize();
    $(window).resize(changeSize);
});

https://jsfiddle.net/dzzobxaz/2/

10
  • так в коде только для одного прописано - пропишите для всех трех и будет то, что вы хотите. Так же не понятна зависимость размера шрифта от размера контейнера
    – Grundy
    23 янв 2016 в 20:19
  • Нет. Размер шрифта во ВСЕХ параграфах станет одинаковым, а мне надо чтобы они соблюдали пропорцию относительно друг друга. 23 янв 2016 в 20:21
  • так и рассчитывайте для всех
    – Grundy
    23 янв 2016 в 20:22
  • То есть, мне надо чтобы, размер шрифта первого параграфа был, например, 12% от родителя, второй 8%, а третий 10%. 23 янв 2016 в 20:23
  • так и рассчитывайте с нужными коэффициентами, для первого у вас уже есть вариант, добавьте для остальных и все
    – Grundy
    23 янв 2016 в 20:24

2 ответа 2

0

Код представленный в вопросе работает для первого элемента, осталось просто добавить для остальных.

для этого надо в функцию changeSize добавить расчеты для двух других элементов

function changeSize(){
    var fontSize1 = parseInt($(".caption").width()/30)+"px";
    $(".caption div :nth-child(1)").css('font-size', fontSize1);  

    var fontSize2 = parseInt($(".caption").width()/30)+"px";
    $(".caption div :nth-child(2)").css('font-size', fontSize2);  

    var fontSize3 = parseInt($(".caption").width()/30)+"px";
    $(".caption div :nth-child(3)").css('font-size', fontSize3);  
}

Соответственно осталось только поменять расчеты на конкретные для каждого элемента.

0
0
$(function() {
    var p = $("div p"),
        fontsizeP = $.map(p, function(p) {
            return parseInt($(p).css("font-size"))
        }),
        maxWidth = 1140;
    function changeSize() {
        var ratio = $(".caption").width() / maxWidth;
        p.css("font-size", function(i) {
            return fontsizeP[i] * ratio + "px"
        })
    }
    changeSize();
    $(window).resize(changeSize)
});

демо https://jsfiddle.net/dzzobxaz/8/

Ваш ответ

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

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