Search code examples
htmlcsstextmedia-queriesfont-size

Can I use media queries based on box area?

I am trying to make a rectangular block of text responsive on different screen dimensions, occupying as much space as possible without overflowing. The text can be wrapped at arbitrary positions to new lines. As the screen can have different orientations, shapes (draggable window), and pixel densities, I am thinking perhaps I should vary the font size according to the area of the block displayed. Is this possible at all?

Something like this:

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

What is the best solution to my problem?

Solution

  • This kinda solved my problem:

    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;