Jump to content

em rem and vw


Recommended Posts

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


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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...