make font-size取决于div大小

Question

我试图让font-size依赖于div大小（因为div是方形的，它取决于高度或宽度并不重要）。这是我的代码：

＆＃13;

＆＃13;

$(document).ready(function(){
    $(document).on('#inputfield', 'blur', function(){
        $.ajax(
             //Properties
             //Current value of the input field should be sent to the server
             data:{inputValue:$('#inputfield').val()}, //Use this in where clause in the server
             success:function(){
                 // Populate the data into the dropdown
             }
        ); 
    }
})

＆＃13;

var oneDay = 24*60*60*1000,
			today = new Date();
			takeoff = new Date("05/28/2018"),
			remaining = Math.round(Math.abs((today.getTime() - takeoff.getTime()) / (oneDay)));


		var loop = new Date(today);
			mon = 'apr',
			adding = 0;

		


		for(var i=0; i<remaining; i++) {
			var elem = document.createElement("div");
			elem.className = "part";
			elem.id = 'p'+i;
			document.getElementById("days").appendChild(elem);
		}


		var parts = document.getElementsByClassName("part");

		for (var i = 0; i < parts.length; i++) {
	    	parts[i].style.fontSize = (600/remaining) + 'px';
	    	parts[i].style.lineHeight = (500/remaining) + 'px';
		}

		while(loop <= takeoff) {
			if (loop.getMonth() == 3) {
				mon = 'apr';
			}
			else if (loop.getMonth() == 4) {
				mon = 'may';
			}

			parts[adding].textContent = (loop.getDate() + " " + mon);           

			var newDate = loop.setDate(loop.getDate() + 1);
			adding += 1;
			loop = new Date(newDate);
		}



		for(var i=0; i<parts.length; i++){
			parts[i].style.height = parts[i].style.width;
		}

＆＃13;

html, body {
			padding: 0;
			margin: 0;
		}

		#days {
			position: absolute;
    		display: table;
    		width: 100%;

    		table-layout: fixed;
    		border-spacing: 1px;
		}

		.part {
    		display: table-cell;
    		background-color: #a9cce3;
    		padding: 3px;

    		box-sizing: border-box;
    		-moz-box-sizing: border-box;

    		border: 1px solid black;
    		border-radius: 2px;
		}

＆＃13;

＆＃13;

＆＃13;

但它有点不正确。加上所有那些fontSize计算使代码看起来很脏，我猜。你能建议一个更好的解决方案吗？

Answer 1

您可以使用rem作为字体大小单位来设置自适应字体大小

＆＃13;

＆＃13;

var oneDay = 24*60*60*1000,
			today = new Date();
			takeoff = new Date("05/28/2018"),
			remaining = Math.round(Math.abs((today.getTime() - takeoff.getTime()) / (oneDay)));


		var loop = new Date(today);
			mon = 'apr',
			adding = 0;

		


		for(var i=0; i<remaining; i++) {
			var elem = document.createElement("div");
			elem.className = "part";
			elem.id = 'p'+i;
			document.getElementById("days").appendChild(elem);
		}


		var parts = document.getElementsByClassName("part");

		

		while(loop <= takeoff) {
			if (loop.getMonth() == 3) {
				mon = 'apr';
			}
			else if (loop.getMonth() == 4) {
				mon = 'may';
			}

			parts[adding].textContent = (loop.getDate() + " " + mon);           

			var newDate = loop.setDate(loop.getDate() + 1);
			adding += 1;
			loop = new Date(newDate);
		}



		for(var i=0; i<parts.length; i++){
			parts[i].style.height = parts[i].style.width;
		}

＆＃13;

html, body {
			padding: 0;
			margin: 0;
		}

		#days {
			position: absolute;
    		display: table;
    		width: 100%;

    		table-layout: fixed;
    		border-spacing: 1px;
		}

		.part {
    		display: table-cell;
    		background-color: #a9cce3;
    		padding: 3px;

    		box-sizing: border-box;
    		-moz-box-sizing: border-box;

    		border: 1px solid black;
    		border-radius: 2px;
font-size:0.5rem;
		}

＆＃13;

<div id="days">
    	
</div>

＆＃13;

＆＃13;

＆＃13;