Размер шрифта относительно контейнера

Question

Я проектирую сайт, который настраивается на размер окна, и мне нужно сделать размер текста относительно его контейнера (div). Я искал про это с помощью css и узнал, что это невозможно. Поэтому я пытаюсь использовать JavaScript, но я не программист на JavaScript. Поэтому я искал каждый кусок кода я необходимый и скомпилировал его к этому:

<script type="text/javascript"> 
    $(document).ready(function() { 
     while(true) { 
      document.getElementById("text").style.fontSize = $("container").height(); 
     } 
    }); 
</script> 

(«а», чтобы повторно размера его постоянно, принимая во внимание, что пользователь может изменить размер окна)

Я поместил скрипт в тег «head», и он не работает. Я не знаю, является ли скрипт неправильным, или если он не работает. Что я делаю не так? Также я хочу поставить задержку в конце скрипта, чтобы избежать ее работы как сумасшедший, но я не знаю, как это сделать.

Спасибо заранее,

Лука

Благодаря ответам, но ничего не работает. Я предполагаю, что скрипт не работает, что может быть неправильным ??? Пожалуйста помоги!

Answer 1

Вы должны попробовать что-то вроде этого вместо того, чтобы (если я правильно понимаю, что вы хотите сделать):

$(".container").each(function(){ //if container is a class 
    $('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class 
}); 

или что-то еще, как этот

$(window).resize(function(){ 
    $('.text').css({'font-size': $('#container').height()+"px"}); 
}); 

Answer 2

Если вы имеете в виду, что вы делаете отзывчивый сайт, вы можете изменить размер шрифта на основе document.documentElement.clientWidth внутри обработчика изменения размера окна.

Кроме того, вы можете использовать em единиц вместо пикселей, которые являются масштабируемыми и мобильными.

CSS3 также имеет новую интересные «корень эм» единица:

CSS3 вводит несколько новых единиц, в том числе блока бэр, который стоит для «корневой эм». Если это еще не поставило вас спать, тогда давайте посмотрим на , как работает rem.

Элемент em относится к размеру шрифта родителя, что вызывает проблему с добавлением . Модуль rem относится к элементу root- или html. Это означает, что мы можем определить один размер шрифта в элементе html и определить все единицы rem в процентах от этого.

http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 3

Try это:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(window).resize(function() { 
      document.getElementById("text").style.fontSize = $(".container").height(); 
      // let container is a class 
     }); 
    }); 
</script> 

Answer 4

Вы можете использовать.размер() обработчик событий, который будет активироваться только при изменении размеров окна

var constant = [Some magic number]  

$(window).resize(function() { 
    var fontSize = $(this).height()*$(this).width()*constant; 
    $(html).css("font-size",fontSize) 
} 

Используя константу для расчета размера шрифта на основе новой ширины/высоты

Answer 5

http://jsfiddle.net/AyRMC/

Вы можете использовать окно просмотра единиц :

.vw{ 
    font-size:3vw; 
    color:red; 
} 
.vh{ 
    font-size:3vh; 
    color:green; 
} 
.vmin{ 
    font-size:3vmin; 
    color:blue; 
} 

нет полной поддержки совсем еще, но IE10, Chrome, Firefox и Safari поддерживают его.

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

Совместимость: http://caniuse.com/viewport-units