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

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;