@crest, Instead, why don't you explain what you're trying to accomplish (in as few words as possible) and we can let you know if VW and VH is practical or if you should be using a different way to accomplish said task.
My thoughts are that you are trying to make your text size as the window gets resized. Am I correct in this assumption? Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Mar 29, 2017, at 7:20 AM, Crest Christopher <crestchristop...@gmail.com> > wrote: > > Let’s assume a 1000px wide viewport / window, then 2.2vw /1000px/100 > = 2.2 / 10 = 22px > > Thus: calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px > > > That is 1000 / 100, how did you get 2.2 from 1000/100 that is 10 ? >> Philippe Wittenbergh <mailto:e...@l-c-n.com> >> Wednesday, March 29, 2017 1:25 AMvia Postbox >> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach> >> >> Ok, I assume, given that paragraph above (a quote from somewhere on the >> internets?, source?), I assume you are trying to understand what the >> following means: >> >> .myclass { font-size: calc( 2.2em + 2.2vw); } >> >> 1. calc() means: calculate the sum of the following two values. >> 2. 2.2em - converted a pixel size, assuming 16px base font: 16 * 2.2 = >> 35.2px. >> 3. 2.2vw - here is where it gets interesting: `vw` stands for viewport >> width, 1vw = 1% of the viewport width. >> Let’s assume a 1000px wide viewport / window, then 2.2vw * 1000px/100 = 2.2 >> * 10 = 22px >> >> Thus: calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px >> >> 3b. Now resize the window, let’s assume the viewport / window is 500px wide; >> 2.2 * 500/100 = 2.2 * 5 = 11px. In this case, the font-size will be 35.2px + >> 11px = 46.2px. >> >> Philippe >> -- >> Philippe Wittenbergh >> http://l-c-n.com/ >> >> >> >> >> >> Crest Christopher <mailto:crestchristop...@gmail.com> >> Tuesday, March 28, 2017 11:24 PMvia Postbox >> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach> >> Your stomach is hurting from the antacids. >> I'm only trying to understand. >> >> >> Take my previous example and help me understand. >> >> >> >> >> >> >> Karl DeSaulniers <mailto:k...@designdrumm.com> >> Tuesday, March 28, 2017 11:00 PMvia Postbox >> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach> >> Ouch. My stomach hurts. >> >> @crest >> Go post that question on Stack Overflow and see what they say. >> >> Best, >> Karl >> >> Sent from losPhone >> >> ______________________________________________________________________ >> 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/ >> Philippe Wittenbergh <mailto:e...@l-c-n.com> >> Thursday, March 23, 2017 10:24 PMvia Postbox >> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach> >> >> Mr Crest, >> >> As others have already said: `em` units and `vw` units have NOTHING, I >> repeat, NOTHING, to do with each other. >> >> (also, if you don’t mind, please take the time to trim your replies to this >> list) >> >> >> Philippe >> -- >> Philippe Wittenbergh >> http://l-c-n.com/ >> >> >> >> >> >> ______________________________________________________________________ >> 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/ >> Crest Christopher <mailto:crestchristop...@gmail.com> >> Thursday, March 23, 2017 10:02 PMvia Postbox >> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach> >> When using vw/vh em are always going to be doubled ? What about pixels ? >> >> For example; 2em is equal to 4vw. Also >> >> If the default font size is 16 pixels and if |2vw| is 2% of the viewport’s >> width ? >> >> > > ______________________________________________________________________ > 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/
