![CSS – Measurement Units [2022]](https://m5.paperblog.com/i/724/7248321/css-measurement-units-2022-L-eXI2yo.png "CSS – Measurement Units [2022]")
Some HTML elements have default sizes. For example, default for paragraph (<p>) text, is 16px.
You can change the size of text with the “font-size:” property in CSS
Relative Sizes in CSS
Relative sizes and measurements are a bit confusing to us newbies.
The
https://www.w3.org/Style/Examples/007/units.en.html#:~:text=The%20em%20is%20simply%20the,sizes%20will%20be%20in%20proportion.emis simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, inemmeans they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such astext-indent: 1.5emandmargin: 1emare extremely common in CSS.
Using an
emvalue creates a dynamic or computed font size (historically theemunit was derived from the width of a capital “M” in a given typeface.). The numeric value acts as a multiplier of thefont-sizeproperty of the element on which it is used. Consider this example:p { font-size: 2em; }In this case, the font size of
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size<p>elements will be double the computedfont-sizeinherited by<p>elements. By extension, afont-sizeof1emequals the computedfont-sizeof the element on which it is used.
If a
font-sizehas not been set on any of the<p>‘s ancestors, then1emwill equal the default browserfont-size, which is usually16px.So, by default
1emis equivalent to16px, and2emis equivalent to32px.If you were to set a
font-sizeof 20px on the<body>element say, then1emon the<p>elements would instead be equivalent to20px, and2emwould be equivalent to40px.In order to calculate the
emequivalent for any pixel value required, you can use this formula:em = desired element pixel value / parent element font-size in pixelsFor example, suppose the
font-sizeof the<body>of the page is set to16px. If the font-size you want is12px, then you should specify0.75em(because 12/16 = 0.75). Similarly, if you want a font size of10px, then specify0.625em(10/16 = 0.625); for22px, specify1.375em(22/16).The
https://developer.mozilla.org/en-US/docs/Web/CSS/font-sizeemis a very useful unit in CSS since it automatically adapts its length relative to the font that the reader chooses to use.
Percentage
When the font-size is specified as a percentage, it is relative to the parent element’s font size
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent
You can use percentage values. They act like em values.
The value is relative to the parent‘s font-size.
As a result, the value will cascade if used on child elements.
Rem
The value is relative to the root element‘s font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.
https://cssreference.io/property/font-size/
VH – Viewport Height
The viewport is the browser window size.
1vh will mean that the element or font will take up 1% of the viewport/browser window.
height:100vh, will mean the element, font etc will be 100% and take up the height of the entire browser window
Viewport width, is “vw”
You can set width, for example the width of a background to a percentage of the width of the user’s browser window. For example
width:50vw; will take up 50% of the width of the screen.
If you want to learn more, video below is decent:
