I have a fluid website and the menu is 20% of its width. I want the font size of the menu to be measured properly so it always fits the width of the box and never wrap to the next line. I was thinking of using "em" as a unit but it is relative to the browser's font size, so when I change resolutions the font size stays the same.
Tried also pts and percentages. Nothing works as I need it...
Give me a hint of how to proceed, please.
Not using media queries is nice because it allows scaling the font size gradually.
Using vw units will adjust the font size relative to the view port size.
Directly converting vw units to font size will make it difficult to hit to the sweet spot for both mobile resolutions and desktop.
I recommend trying something like:
body {
font-size: calc(.5em + 1vw);
}Almost before we knew it, we had left the ground.Credit: CSS In Depth
This worked for me :
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum
viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
Explained in detail here: https://css-tricks.com/books/volume-i/scale-typography-screen-size/
This best worked for me like this (where .5 is the font size scaling factor)
font-size: calc(.5 * (1.5vh + 1.1vw));
Since screens are generally more wide than they are tall, I used a 1.1:1.5 ratio.
I noticed that when I use this formula the font size stays exactly the same no matter what level of zoom I use.
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
return (actualFontSize / maxScreenWidth) * window.innerWidth;
}
// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)
</script>
I hope this will help. I am using this formula for my Phase game.