使字体大小取决于 div 大小答案

【问题标题】：make font-size depend on div size使字体大小取决于 div 大小
【发布时间】：2018-04-18 08:35:55
【问题描述】：

我试图让 font-size 取决于 div 大小（因为 div 是方形的，它取决于高度或宽度都没有关系）。这是我的代码：

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;
		}

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;
		}

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

但它的工作有点不正确。加上所有这些 fontSize 计算使代码看起来很脏，我猜。您能否提出一个更好的解决方案？

【问题讨论】：

I wrote an obscure Javascript function for that. 搜索自适应字体大小。演示——不是——工作更多。
当你说它工作不正常时，你能举个例子吗？

标签： javascript html css

【解决方案1】：

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

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;
		}

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;
		}

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

【讨论】：