> On Mar 29, 2017, at 12:24 PM, Crest Christopher <crestchristop...@gmail.com> 
> wrote:
> 
> I'm only trying to understand.
> 
>   In this example, at a viewport width of 0, the font-size would be
>   exactly 1em. As the screen >gets larger, the value of 1vw would be
>   added to the minimum font size of 1em. But this >technique is not
>   always ideal; often we want to set a minimum font size at a screen
>   size other >than zero.
> 
> ​
> Take my previous example and help me understand.

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/





______________________________________________________________________
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/

Reply via email to