SSteven Posted November 16, 2018 Share Posted November 16, 2018 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 16, 2018 Share Posted November 16, 2018 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now