我可以使用基于框区域的媒体查询吗

Question

我正试图让一个矩形文本块在不同的屏幕尺寸上做出响应，尽可能多地占用空间而不会溢出。文本可以在任意位置换行。由于屏幕可以有不同的方向、形状(可拖动窗口(和像素密度，我想也许我应该根据显示的块的面积来改变字体大小。这可能吗？

类似这样的东西：

@media max-screen-area: 1600cm^2 { section { font-size: 1cm; }}
@media max-screen-area: 1000cm^2 { section { font-size: 0.8cm; }}

对我的问题最好的解决办法是什么？

Answer 1

这解决了我的问题：

function resize() {
for (let i = 0; i < 8; i++) {
document.querySelectorAll("section>div:first-child")[i].style.fontSize = 
Math.sqrt(window.innerHeight*window.innerWidth/2000)+"px";
}
}
resize();
window.onresize = resize;