Units of measurement in CSS

Página 5

Units of measurement in CSS are essential for defining the size and proportion of elements on a web page. There are several units of measurement that can be used, each with its particularities and specific applications.

Absolute measurement units

The absolute units of measurement are fixed and do not change in relation to the size of the screen or the device used to access the page. Among the most common absolute units of measurement are:

• px: is the most commonly used unit of measurement in CSS. Each pixel represents a point on the screen and is an absolute measurement, that is, it does not change in relation to the size of the screen or the device;
• en: is a unit of measurement used primarily for printing. Each point represents 1/72 of an inch;
• in: is a unit of measurement that represents an inch. It is rarely used in web design, but can be useful in print projects.

Relative units of measure

Relative units of measure are proportional to the size of the canvas or parent element. This means that they adapt to different resolutions and screen sizes, making the page more responsive and adaptable. Among the most common relative units of measurement are:

• %: represents the percentage of the size of the parent element. For example, if a parent element is 500px wide and a child is width: 50%, then it will be 250px wide;
• em: is a unit of measurement that is based on the font size of the parent element. For example, if the parent element's font size is 16px and a child has font-size: 1em, it will have 16px font size;
• rem: is a unit of measurement that is based on the font size of the root element (usually the html element). For example, if the root element's font size is 16px and a child has font-size: 1rem, it will have a font-size of 16px;
• vw and vh: represent the percentage of the width (vw) or height (vh) of the screen. For example, if the screen width is 1000px and an element has width: 50vw, then it will be 500px wide.

It is important to understand the differences between absolute and relative units of measure and choose the one that best fits your project needs. Also, it's important to remember that overuse of absolute units of measure can make the page less responsive and adaptive, while overuse of relative units of measure can make the page choppy and unpredictable.

Next page of the Free Ebook:

6Box Model in CSS