#REM #PX #EM
One of the most critical decisions website developers must make is deciding what unit of measurement to use when sizing elements, fonts, and other design properties. The three most popular units: px, em, and rem, are most commonly used, but other units such as pt, pc, ex, etc., may also be suitable.
In this article, I`m going to try to explain these differences clearly for developers who don`t understand what they mean.
CSS units have two basic types:
Absolute units
Absolute units are fixed and do not depend on the size of the parent element or the viewport. Examples of absolute units are pixels (px), points (pt), and centimeters (cm).
Relative units
Relative units, on the other hand, are flexible – and just as the name implies, they are relative to the parent element’s size, the viewport’s size, or the root element’s font size.
What is the difference between REM, PX and EM?
REM (Root EM):
This unit is relative to the root element (usually the <html> tag) and is useful for constructing responsive designs. The font size of the root element is one rem. For example, if the root element`s font-size is 16px, then 1rem is the same as 16px.
The root font-size is the default font-size specified either by the user in their browser settings or by you, the developer.
For example:
Advantages:
Disadvantages:
Pixel (Px):
The unit of measurement is absolute and cannot be compared to anything else. It is commonly used for elements with fixed sizes or elements that require precise measurements.
The container doesn`t scale according to the viewport, nor does the text scale according to the viewport when you resize the browser.
Its fixed nature is one of the main reasons why px is not always recommended for responsive design. px is useful when you want to specify a fixed size of an element, such as a border size or an image size.
For example:
In this example, the font size of the element is set to 14 pixels and the top margin is set to 20 pixels.
Advantages:
Disadvantages:
Em (Relative EM):
The em is another relative unit of measurement, like the rem. Unlike rem, however, em is related to the font size of the parent element or the nearest parent with a defined font size.
Let`s say you have a parent div with a font-size of 16px. The paragraph font-size will be 16px if you create a paragraph element in that div with a font-size of 1em.
For example:
In this example, the font size of the child element is 0.8 times the font size of the parent element.
Advantages:
Disadvantages:
The choice of unit depends on the project`s specific requirements. A rem design can be scalable, an em design can be responsive, and a px design can be fixed.
Connect with Revaalo labs your one stop solution for Digital Transformation needs.
One of the most critical decisions website developers must make is deciding what unit of measurement to use when sizing elements, fonts, and other design properties.
Read more
It`s an amazing technology-one that will help us solve society`s toughest problems and reshape the world.
Read more13
December
Today, web browsers play a significant role in our lives, providing us with access to a world of information and possibilities.
Read more
Power BI is a popular business intelligence tool developed by Microsoft for data visualization and analysis. While Power BI is a robust solution, there are several alternatives available that cater to different needs and preferences.
Read more09
October
Tenant billing systems are software solutions used by property owners, managers, and landlords to accurately bill tenants for their usage of utilities and services.
Read more