using the new vmin
css property to get the right font size. works absolutely great!
div.sample { font-size: 1.5vmin; text-align: center; ... }
the problem occurs when the page is resized. for example, if the page is made smaller, the font-size
is unchanged, making everything out of kilter.
first, is the browser supposed to handle this?
second, what's the best way to handle it? it seems that if I use a trigger to set the font-size
, then I would need to know the font-size values in javascript
as well as the css
, creating a situation bound to fail.
It looks like vmin
is behaving in Firefox.
Here's a jsfiddle I made for testing: http://jsfiddle.net/noahcollins/Sc8gm/
It sounds like you're seeing the issue in chrome? As Bazzz pointed out, there's a Chrome bug that's still open. I was able to replicate it in Canary. The CSS Tricks article can help you get around it with some javascript if you're so inclined.
Another thing to keep in mind: support for vmin
in mobile browsers is very limited at this time, so it will be an issue in the case when users rotate between portrait & landscape.