Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VH and VW don't update in Safari on window resize #1

Open
nfiniteset opened this issue Jun 13, 2013 · 2 comments
Open

VH and VW don't update in Safari on window resize #1

nfiniteset opened this issue Jun 13, 2013 · 2 comments

Comments

@nfiniteset
Copy link
Owner

This article has a hack to fix it.
http://css-tricks.com/viewport-sized-typography/

@mrlarner
Copy link
Collaborator

I'm unfamiliar with vh/vw, but wanted to ask what the benefit is over something like rem? Is it just automatic, allowing you to avoid setting global font-size breakpoints?

@nfiniteset
Copy link
Owner Author

vh and vw are a little different from rem.

vh and vw are proportionate to the width and height of the viewport.

1vw == window.document.width/100

rem is proportionate to the font-size of the html element.

1rem == $('html').css('font-size')

You can use rem to achieve a similar effect, as seen here,
but you would have to use javascript to set the font-size of the html element as a fraction of the window width.

vm is another cool unit. It's equal to 1% of the smaller of vw and vh.

vh/vw/vm are dynamic (at least in chrome, safari doesn't want to recalculate them on resize).
So they allow resizing on a spectrum rather than on discrete points.

Support is decent in modern browsers.
http://caniuse.com/#feat=viewport-units

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants