Если размер блока напрямую зависит от размера окна браузера, то можно использовать
@media правила подобным образом:
@media screen and (max-width: 800px) {
.my-class { font-size: 40px; }
}
@media screen and (max-width: 400px) {
.my-class { font-size: 20px; }
}
В противном случае, если такие условия нужно задавать для конкретного блока/контейнера (
div или другого), то тут из вариантов только JavaScript с коллбэком на ресайз элемента.
Пример с использованием jQuery:
$('.my-class').resize(function() {
var width = $(this).width();
if(width <= 400)
$(this).css('font-size', '20px');
else
$(this).css('font-size', '40px');
});
Простой
