You don't need to - thousands of people do their designs without using VW and VH - so, you should be able to do that too. Good luck!
On Wed, Mar 29, 2017 at 4:23 PM, Crest Christopher < crestchristop...@gmail.com> wrote: > If we assume the viewport is 2000px wide with calc(2.3+2.1) then; > 2000px (viewport) * 2.3 /100 * 10 = 460px, correct ? > > I still don't understand; > > calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px > > > > > > > > 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=su >> mlink&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=su >> mlink&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=su >> mlink&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=su >> mlink&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=su >> mlink&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/
