79527804

Date: 2025-03-22 17:18:07
Score: 1.5
Natty:
Report link

The less nerve-racking while still efficient, all-screen-dimensions-covering solution for font-sizes is to use calc() to set about 1/3 to 1/2 the size in px and 1/2 to 2/3 in vw so that the px value is met for a screen width of 1920px. Like this : "font-size:calc(16px + 1.7333vw)... This works for any REALISTIC window sizes as explained :

Let's say you take all 4 corners of your screen or points near them, and you stretch a window starting at or near the upper-left corner up to each of these 4 points :

STRETCHED UP TO SOMEWHERE AT UPPER LEFT (but further down and to the right of the window's upper-left offset) : This is very tight, but corresponds in ratio to a landscape oriented phone : its width being considerably smaller than a desktop's display, your font-size will take about 55% of the size it would have on a full 1920x1080 HD Display, with phone's height being roughly 1/3 to 1/2 that of a desktop (talking about view-port here, not screen). That's slightly bigger fonts in % of the screen's height but should still meet your needs provided you design surrounding elements adequately and thoughtfully. (you may always downsize the px part of the size and upscale the vw portion)

STRETCHED UP TO SOMEWHERE AT LOWER LEFT (but a bit to right of the window's left offset) : This is portrait-oriented phone display. The small width will considerably shrink your font-size for it.

STRETCHED UP TO LOWER RIGHT : This is desktop and tablet display if you resize it with the same ratio but smaller. These devices having quite some height, you don't have to worry about the measurement being based on view-port's width rather than its height.

STRETCHED UP TO UPPER RIGHT : There is no way anyone will ever resize a window like this, (3x as wide as high kinda thing) unless things get really quirky for some reason (probably less than 1 in 10million visitors will come in such a deviant state -> Know the guy that surfs the web sporting 1800 x 450? Lucky you!) The font-size would likely take too much height due to minimal view-port height and the measurement having its width for basis, and not a fancy-ass mixture of vh and vw, css media dimension ranges, using the clamp function or even worse, impossible-algebra-based calc functions mixing the 4 most-basic arithmetic operations like I've once genuinely found labeled as a 'resource' : LMAO... Basically we got our rightful reason for only using vw here : the only case where it's ineffective is non-existent in pure matter of practice.

See the "Creative11" at the home page of https://handsearseyes.fun/ (this is merely 50% px 50% vw, and fit my needs for a page with plenty of space on it...

Reasons:
  • Blacklisted phrase (0.5): LMAO
  • Long answer (-1):
  • No code block (0.5):
  • Contains question mark (0.5):
  • Low reputation (1):
Posted by: Frank