em rem and vw

[SSteven]

About the em and rem length units, w3schools states the following:

Quote

The em and rem units are practical in creating perfectly scalable layout!

em and rem are relative units, relative to the font size of the element or the root element respectively.  Example from w3schools:

p {
    font-size: 16px;
    line-height: 2em;
}

In the above CSS code, for <p> elements, the line-height will be twice the font-size, 2 x 16px = 32px. A pixel is an absolute length unit (1 pixel = 1/96th of an inch). Therefore, in the above example, line-height will also be fixed. Therefore, where does the scalability come in?

 

Secondly, regarding the vw unit: It is relative to the viewport's width. As the viewport width decreases, a property expressed as x number of vw units will also shrink. Thus, vw is scalable. However, on smaller viewports, such a dimension is too small to read. Therefore, how useful is vw in practice?

Do you know of a (small) example that can demonstrate the utility of vw? Thanks.

[dsonesuk]

The scalability comes when you change font-size, for that paragraph styling or paragraphs styled to a specific class or id  the line-height adjusts automatically.

vw is correctly scalable only for elements that extend the full viewport width, if you use this in a element 25% total width of viewport width, it still scales to 100% of viewport width.