Search code examples
htmlcssresizeviewport-units

in css, using the vmin/vmax attribute when page size changes


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.


Solution

  • 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.