Responsive font size relative to container

Question

I'm trying to make the font size be responsive and auto adjust the font size depends on width & height of the container(image). But problem now is when I make the screen size smaller, It keep run the font size "1em" only. It start from // font size in the script, Thank you! :)

can I know where is the problem?

 $(function() { // document 'use strict'; var t1 = $('div.cp'); // Settings t1.each(function() { var _t1 = $(this); // Different Data type if (_t1.data('type') == "c1") { _t1.addClass('red').css( { "background-image" : "url('https://www.planwallpaper.com/static/images/violet-vector-leaves-circles-backgrounds-for-powerpoint_PdfkI4q.jpg')", "background-size" : "100% 100%" } ); _t1.append( '<div class="title">' + 'im red' + '</div>' ); $(_t1.children()).wrapAll("<div class='ty-container'/>"); } else { return false; } }); // alignment to middle $('.cp').on('resize',function() { $(".ty-container").css('margin-top', function() { return($('.cp').height() - $(this).height()) / 2 }); }).resize(); // font size textfit(); $(window).on('resize', textfit); function textfit() { var w1 = $('.cp').width()-10; var w2 = $('.title').width(); var wRatio = Math.round(w1 / w2 * 10) / 10; var h1 = $('.cp').height()-10; var h2 = $('.title').height(); var hRatio = Math.round(h1 / h2 * 10) / 10; var final = Math.min(wRatio, hRatio); $('.cp').css('font-size', final + 'em'); } });//end 

 .cp{width:340px;height:156px;display:table;text-align: center;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cp" data-type="c1"></div> 

Answer 1

Use font size vw that means viewport width. Must declare viewport width meta at header. and use font-size in css. example font-size: 50vw;