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.

Share this post

Link to post
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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...