I can not understand how the property vw and vh .

On css-tricks writes:

1vw = 1% of viewport width;
1vh = 1% of viewport height

But, for example, I have a window width of 768px, so when I set font-size: 100vw according to the logic, should the font size be 768px, or not? And then I climbed much further 768px.

PS I have already reread several articles, and in no way can I figure out how to correctly calculate the dependence of screen expansion on the value of vw/vh .

An example in the sandbox: https://jsfiddle.net/obats/wf6vu3a8/

    3 answers 3

    Here it is well written about this:

    What is “font size”? This is not at all the “size of the largest letter in it,” as one might think.

    The font size is some kind of "conventional unit" that is embedded in the font.

    It is usually slightly larger than the distance from the top of the largest letter to the bottom of the smallest. That is, it is assumed that any letter or their combination is placed in this height. But at the same time, the "tails" of letters, such as p, g, can go beyond this value, that is, crawl out from below. Therefore, usually the height of the line is made slightly larger than the font size.

    So, it’s impossible to measure the font size with the help of some standard formulas; moreover, different fonts have different sizes of these spare indents.

    I myself usually use the selection method for the font, it is that the debugger selects the appropriate value in px, which corresponds to the value in vh or in vw, and then the coefficient is used. For example, if 14px = 2.8vh, then a coefficient of 5 is obtained, the last 20px / 5 = 4vh.

    UPD.

    In the role of the debugger to compare fonts is a regular browser debugger, for example, in Chrome. Write to css like this:

     .class { font-size: 14px; font-size: 2.8vh; }

    And then you already play with checkboxes in the debugger by turning on / off the lower value and adjusting the size to vh, until you stop noticing the difference from on / off.

    • As far as I understand, the value of font-size: 100vw gives the meaning not to the phrase separately, but to a specific letter? If so, then everything is logical. Thanks for the tip. But there is a question about your font size selection process. At the expense of the coefficient I understood (as I understand it. Different for different screen extensions?). But how is your “technical” component implemented? What is the "debugger" role? - Orest Bats
    • The coefficient varies depending on the size, usually for mobile devices, the skittle is needed more, and accordingly vh or vw will be more. If the kegel does not change, then the value will be the same for different resolutions. About the debugger add to the answer. - MasterAlex
     font-size: 100vw

    A must be 100vh .

    https://jsfiddle.net/wf6vu3a8/1/

     html { background-color: #222; color: #FF4136; } h1 { font-size: 100vh; text-align: center; line-height: 1; padding: 0; margin: 0; } 
     <h1>Questionable</h1>

    Next - the difference in the line-height and margin the body cause a scroll.

      1vh = 1% of the height of the window sizes. In your example, try changing the height of the window with the result.

      UPD: Perhaps the problem is in the jsfiddle itself. At http://codepen.io/Ostroffskiy/pen/ORVRKR your code

       html { background-color: #222; color: #FF4136; } h1 { font-size: 100vw; text-align: center; line-height: 1; padding: 0; margin: 0; }

      works great.

      • Already corrected example. Incidentally, the wrong parameter inserted) - Orest Bats