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

Question

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

像这样：

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