相对于容器的响应字体大小

Question

我试图让字体大小响应并自动调整字体大小取决于宽度＆amp;容器的高度（图像）。 但现在的问题是当我将屏幕尺寸缩小时，它会继续运行字体大小＆＃34; 1em＆＃34;只要。它从脚本中的//字体大小开始，谢谢！ ：）

我可以知道问题出在哪里吗？

＆＃13;

＆＃13;

$(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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用字体大小vw表示视口宽度。必须在标题处声明视口宽度元数据。并在css中使用font-size。示例font-size：50vw;