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

css, html, resize, viewport-units

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.

Problem

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.

Original source