1vw = 1% of the viewport width. But, in the case of a desktop browser, the width is variable - hence the beauty of the vw/vh units. Provided the browser supports these units.
See http://caniuse.com/#feat=viewport-units It's not that easy though as fonts using vw can quickly become too tiny or extremely huge depending on the viewport. When I have tried them, and I have used them sparingly, I set the font in ems (or rems most likely) for a base (mobile) style, then at a certain wider breakpoint changed to vw, and then changed back to ems/rems when the font has gotten to the max size I desired. I have seen SASS mixins that implement a min/max but it had its limitations. On Sun, Mar 19, 2017 at 8:04 PM, Tom Livingston <tom...@gmail.com> wrote: > I see that as if the viewport is 800px wide, then 800px is 100% of the > width. > > > > On Sun, Mar 19, 2017 at 7:56 PM, Crest Christopher < > crestchristop...@gmail.com> wrote: > >> Therefore, if the viewport width is 800px = 8% of viewport width; if I'm >> doing the math right ? >> >> Tom Livingston <tom...@gmail.com> >> Sunday, March 19, 2017 7:52 PM via Postbox >> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach> >> No. Viewport units are based on the viewport. 1vw = 1% of viewport >> width, 1vh = 1% viewport height. >> >> >> >> >> -- >> >> Tom Livingston | Senior Front End Developer | Media Logic | >> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com >> >> >> #663399 >> Crest Christopher <crestchristop...@gmail.com> >> Sunday, March 19, 2017 7:45 PM via Postbox >> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach> >> What is 1vw, a pixel ? >> >> >> Tom Livingston <tom...@gmail.com> >> Sunday, March 19, 2017 7:39 PM via Postbox >> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach> >> No. >> >> Viewport units are based on the viewport. 1vw = 1% of viewport width, 1vh >> = >> 1% viewport height. >> >> >> >> On Sun, Mar 19, 2017 at 6:30 PM, Crest Christopher < >> >> Crest Christopher <crestchristop...@gmail.com> >> Sunday, March 19, 2017 6:30 PM via Postbox >> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach> >> If understood correctly based on the article Rainer posted. >> >> 1em = 2vw, 4em = 8vw etc ? >> >> >> Rainer Berthold <rainer.berth...@gmx.net> >> Sunday, March 19, 2017 2:39 PM via Postbox >> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach> >> Sorry, can’t follow. Tom’s post may help. >> >> Best, Rainer >> >> >> Am 19.03.2017 um 16:03 schrieb Crest Christopher >> <crestchristop...@gmail.com> <crestchristop...@gmail.com>: >> >> Based on what I read in the article; EM are always double in VW ? >> >> >> >> ______________________________________________________________________ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> ______________________________________________________________________ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> >> > > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > #663399 > -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
