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

Posted 2023-03-06

【中文标题】我可以使用基于框区域的媒体查询吗？

【英文标题】：Can I use media queries based on box area?

【发布时间】：2021-12-29 03:25:54

【问题描述】：

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

类似这样的：

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

我的问题的最佳解决方案是什么？

【参考方案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;