September 25, 2024

CSS Units : Are you Using Right CSS unit for making responsive design in web pages ?

The goal of responsive design is to effectively resize the content to fit a variety of screen sizes. You can design websites that look amazing and work flawlessly on all devices by becoming proficient with CSS units and merging them with innovative layout plans.

Types of CSS Units :

1) Absolute units

2) Relative units

CSS Absolute units are :

px - Pixels (1px is typically equal to 1/96th of an inch)
cm - Centimeters
mm - Millimeters
in - Inches (1in = 96px)
pt - Points (1pt = 1/72 of an inch)
pc - Picas (1pc = 12pt)

Note : Given abosulte units are generally not ideal for responsive design because they don’t scalable or adapting for changing the screen sizes. However, they can be useful for printing styles.

CSS Relative units are :

% (percentage) – Relative to the size of the parent element.
em – Relative to the font size of the parent element (e.g., 2em is twice the size of the parent’s font size).
rem – Relative to the font size of the root element (<html>), offering more consistency than em.
vw – Relative to 1% of the viewport’s width.
vh – Relative to 1% of the viewport’s height.
vmin – Relative to 1% of the viewport’s smaller dimension (width or height).
vmax – Relative to 1% of the viewport’s larger dimension (width or height).
ch – Relative to the width of the character “0” in the current font.
ex – Relative to the height of the lowercase letter “x” in the current font.

Note : The above Given relative units are commonly used in responsive design to ensure that content adapts dynamically for different screen sizes and contexts.