CSS has many different units for measuring and expresssing length but in an effort to be quick and accurate - they fall into two categories: Absolute and Relative.
Absolute Lengths - where the units are fixed
px
for pixels ( Note: pixels are relative to the viewing device. )cm for centimeters
Relative Lengths - where units are expressed relative to another length property.
em - relative to the font-size of the element itself
rem - relative to the root element.
vw - relative to 1% of width of viewport ( browser window size )
vh - relative to 1% of height of viewport (browser window size)
vmin - relative to 1% of the smaller of the viewport's width and height. Look at both the width and the height and use whichever is shorter.
vmin In More Detail
vmin
is a unit in CSS that is used to specify a size in terms of the viewport dimensions. It represents the smaller of vw
(viewport width) and vh
(viewport height).
Here's how it works:
- 1
vmin
is equivalent to 1% of the smaller of the viewport's width and height.
For example, if the viewport (browser window) is 800px wide and 600px tall, then:
1
vw
(1% of viewport width) = 8px1
vh
(1% of viewport height) = 6px
In this case, 1vmin
would be equal to 6px since it's the smaller value between vw
and vh
.
Practical Examples
Text resizing based on viewport: If you want text to resize based on the viewport dimensions but you always want to use the smaller value, you can use
vmin
.h1 { font-size: 10vmin; /* The font size will be 10% of the smaller viewport dimension */ }
So, if your viewport was 1000px by 700px, the font size would be 70px (since 700px is the smaller dimension and 10% of 700 is 70).
Creating a responsive square: If you want to create a square that maintains its shape (equal width and height) while resizing based on the viewport dimensions, you can use
vmin
for both width and height..responsive-square { width: 50vmin; height: 50vmin; background-color: #ff5733; }
In a 1200px by 800px viewport, the square would be 400px by 400px.
Responsive background icon: If you have a background icon and you want it to resize with the viewport, but never get too big relative to the screen size, you can use
vmin
:.icon-background { background: url('icon.png') no-repeat center/20vmin; }
Here, the background icon size will be 20% of the smaller viewport dimension.
In general, vmin
is useful in responsive designs where you want to ensure that elements resize proportionally to the smallest viewport dimension. Caveat: it's important to be cautious as using vmin
extensively might lead to design issues on extreme aspect ratios (very wide or very tall viewports).
Rem vs Em Units
Both rem
and em
are relative font-size units in CSS. Here's a brief overview of each:
em:
The value of
1em
is equal to the font-size of the element on which it's used.If you use
em
on nested elements, it can compound, asem
will be relative to the font-size of its direct parent.
Example:
div {
font-size: 16px;
}
span {
font-size: 2em; /* This will be 32px, as it's 2 times the font-size of its parent (div) */
}
rem:
Stands for "Root em".
The value of
1rem
is always equal to the font-size of the root element, usually the<html>
element.It doesn't compound the way
em
does, because it always refers to the root element's font size, not any parent element.
Example:
html {
font-size: 16px;
}
div {
font-size: 2rem; /* This will always be 32px regardless of its parent's font-size, because it's based on the root font-size */
}
Which is preferred and why?
Both units have their places in design and development, but rem
has become more popular for a few reasons:
Consistency: As
rem
is always relative to the root element's font size, it offers a consistent and predictable scaling across the website. Withem
, it's easy to accidentally compound sizes in nested elements, leading to unexpected results.Ease of Global Resizing: By changing the font-size on the root element, you can easily scale the entire website's sizing (when
rem
units are used), which can be handy for theming or accessibility features.Clarity: When other developers inspect or collaborate on the code, using
rem
offers clarity as they can always refer to the root's font-size to understand the unit's actual pixel value.
However, em
is still valuable in certain scenarios:
Component-Level Scaling: If you're creating a reusable component (like a widget or a module) and you want its inner elements to scale based on the component's base size,
em
is very handy. Adjusting the component's font-size will proportionally scale all its inner elements set withem
units.Vertical Rhythm and Typography:
em
can be useful for maintaining vertical rhythm in typography or setting spacing related directly to font size, like margins or paddings.
In conclusion, while both rem
and em
have their use cases, most developers prefer rem
for general layout and component sizing because of its consistency and predictability. However, its good to know the ins and outs of both rem and em.
Percentage Unit in CSS
In CSS, the percentage (%
) unit is a relative unit that represents a portion of a particular reference value. The meaning of the percentage value and its reference point can vary depending on the property with which it's used.
Here's how the percentage unit is commonly interpreted with various CSS properties:
Width & Height:
The percentage value is relative to the width or height of the parent element.
.container { width: 300px; height: 200px; } .child { width: 50%; /* This will be 150px */ height: 50%; /* This will be 100px */ }
Padding & Margin:
For
padding-top
,padding-bottom
,margin-top
, andmargin-bottom
: The percentage is relative to the width of the containing element.For
padding-left
,padding-right
,margin-left
, andmargin-right
: The percentage is also relative to the width of the containing element.This behavior might seem counterintuitive, especially for top and bottom paddings/margins, but it ensures consistent spacing in responsive designs.
.container { width: 300px; } .child { padding-top: 10%; /* This will be 30px */ }
Font-Size:
The percentage value is relative to the parent element's font size.
.parent { font-size: 16px; } .child { font-size: 150%; /* This will be 24px (150% of 16px) */ }
Line-Height:
When used with
line-height
, the percentage is relative to the current element's font size.p { font-size: 16px; line-height: 150%; /* This will be 24px (150% of 16px) */ }
Background Position:
Specifies the position of a background image. A value of
0%
aligns the top or left side of the image with the corresponding top or left side of the container.100%
aligns the bottom or right side of the image with the corresponding bottom or right side of the container.See more detail here --> https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Others:
- Percentage values in other properties, such as
background-size
ortransform
, have their specific reference points, and you'd need to refer to the respective property definition to understand the behavior.
- Percentage values in other properties, such as
Advantages of using percentages:
Responsiveness: Percentage units are inherently responsive. They adapt based on the size of their reference, which often is a parent or containing element.
Fluid Layouts: They're essential for creating fluid grid systems, especially before the widespread use of CSS Grid and Flexbox.
Scalability: Makes it easier to scale elements uniformly, like in zooming or theming scenarios.
When designing with percentages, it's crucial to understand the context and the reference point from which the percentage derives its actual computed value.
Helpful links
https://gist.github.com/basham/2175a16ab7c60ce8e001 ( CSS Units Best Practices)
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position (Background Position)