使字体大小取决于div大小

Question

我试图使字体大小取决于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计算，我想代码看起来很脏。 您能否提出更好的解决方案？

Answer 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>