EN/CH Mode

BRUCE_FE CSS Interview Notes - px vs rem vs em Detailed Explanation

Deep understanding of the differences between px, rem and em units in CSS, usage scenarios and responsive design practices, mastering the precise application of various length units in modern web development.

EN/CH Mode

Lazy to read articles? Then watch videos!

Basic Concepts of CSS Length Units

CSS provides various units for setting element dimensions, which can be divided into absolute units (like px) and relative units (like em, rem, %). Understanding the characteristics and applicable scenarios of these units is crucial for creating responsive and accessible web pages.

This article will focus on three most commonly used length units: px, em and rem, their differences and respective advantages and disadvantages.

Pixels (px) - Fixed Absolute Units

Pixels (px) are the most basic absolute units in CSS, representing a physical display point on the screen.

px Characteristics

1. Fixed size, not affected by external factors
2. 1px may have different actual sizes on different screen densities
3. Does not change with user's font size settings
4. Precise control of element size

.button {
  width: 200px;    
  height: 50px;    
  font-size: 16px; 
  padding: 10px;   
  border-radius: 4px; 
}

Advantages of px

1. Precise control of element dimensions
2. Stable and predictable performance
3. Suitable for designs requiring pixel-level precision
4. Intuitive and easy to understand, value equals visual size

Disadvantages of px

1. Lacks responsive features, doesn't change with window size
2. Doesn't change with user's font size settings
3. May appear inconsistent on high DPI screens
4. Not conducive to implementing accessible design

em - Units Relative to Parent Element

em is a relative unit, relative to the font size of the element's parent element. 1em equals the parent element's font size.

em Characteristics

1. Relative to parent element's font size
2. Has inheritance and cascading effects
3. Can be used to create proportional design relationships
4. Produces compound effects in nested elements

body {
  font-size: 16px; /* Base font size */
}

.parent {
  font-size: 20px; /* New base */
}

.child {
  font-size: 1.5em;  /* = 20px * 1.5 = 30px */
  margin: 1em;       /* = 30px * 1 = 30px (because margin is relative to own font size) */
}

.grandchild {
  font-size: 1.5em;  /* = 30px * 1.5 = 45px (note the compound effect here) */
}

Advantages of em

1. Can create proportionally consistent designs
2. Suitable for defining relative sizes within elements
3. Maintains internal proportions when elements scale
4. Can adjust size based on parent element

Disadvantages of em

1. Compound effects may lead to unpredictable results
2. Complex size calculations for nested elements
3. Requires careful management of inheritance relationships
4. Not easy for globally consistent responsive design

rem - Units Relative to Root Element

rem (root em) is a unit relative to the font size of the root element (html). 1rem equals the root element's font size.

rem Characteristics

1. Relative to root element's font size
2. Not affected by element nesting levels
3. Easy to globally control website proportions
4. Simplifies implementation of responsive design

html {
  font-size: 16px; /* Root element font size */
}

@media (max-width: 768px) {
  html {
    font-size: 14px; /* Adjust root font size on small screens */
  }
}

.title {
  font-size: 2rem;   /* = 16px * 2 = 32px (on large screens) */
                     /* = 14px * 2 = 28px (on small screens) */
}

.container {
  width: 50rem;      /* = 16px * 50 = 800px (on large screens) */
                     /* = 14px * 50 = 700px (on small screens) */
  padding: 1.5rem;   /* = 16px * 1.5 = 24px (on large screens) */
                     /* = 14px * 1.5 = 21px (on small screens) */
}

Advantages of rem

1. Easy to globally control proportions of all elements
2. Not affected by nesting, simple calculations
3. Very suitable for responsive website design
4. Supports accessible design with user-customizable font sizes

Disadvantages of rem

1. Cannot create local proportional relationships based on parent elements
2. Not supported in IE8 and below
3. Overly dependent on root element settings
4. May require JavaScript assistance for advanced responsive behaviors

Unit Comparison: When to Use px, em, or rem?

Unit	Applicable Scenarios	Advantages
`px`	Borders, shadows, one-pixel lines	Precise control of visual elements
	Media query breakpoints	Precise values based on device dimensions
	Small decorative elements	Elements that don't need to change with font
`rem`	Font sizes	Site-wide consistent scaling, supports user customization
	Buttons, input fields	Maintains consistent response of form elements
	Container dimensions, spacing	Overall layout responsive adjustment
`em`	Element internal spacing	Proportional to element font size
`em`	Icons, local elements	Maintains proportional relationship with surrounding text

Best practice is to mix these units, choosing the most appropriate unit for different elements and purposes. In modern web design, common approaches are:

1. Use rem as the foundation for global proportions (font sizes, spacing, container dimensions)
2. Use em to handle typography details related to specific element fonts
3. Use px to handle small elements and visual details requiring precise control
4. Use % to handle responsive layout widths and flexible elements

Using rem for Responsive Design

rem units are particularly useful in responsive design because by changing the root element's font size, we can proportionally adjust the size of all elements on the website simultaneously.

/* Dynamically set root font size based on window width */
html {
  /* Default font size */
  font-size: 16px;
}

/* Tablet devices */
@media (max-width: 992px) {
  html {
    font-size: 15px;
  }
}

/* Mobile devices */
@media (max-width: 576px) {
  html {
    font-size: 14px;
  }
}

/* Or use vw units for smooth font size scaling */
html {
  /* Base is 16px (when window width is 1000px) */
  font-size: calc(14px + 0.2vw);
}

/* Then all elements using rem will automatically respond */
.container {
  width: 70rem; /* Will change with root font size */
  padding: 2rem;
}

.heading {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

🔥 Common Interview Questions

(1) Explain the main differences between px, em, and rem

Answer:The main differences between px, em, and rem lie in their reference baselines:

px (pixels) are absolute units, representing a physical point on the screen. 1px is always a fixed size, not affected by any element's font size.
em is a relative unit, relative to the font size of the current element's parent element. For example, if the parent element's font size is 16px, then the child element's 1em equals 16px. em has inheritance and produces compound effects in nested elements.
rem is a relative unit, relative to the font size of the root element (html). All rem values uniformly reference the root element's font size, not affected by element nesting. For example, if html's font size is 16px, then 1rem equals 16px, regardless of the element's nesting position in the document.

These differences determine their applicable scenarios: px is suitable for precise control, em is suitable for proportional relationships within elements, and rem is suitable for globally consistent responsive design.

(2) How do em and rem behave differently in nested elements?

Answer:The main differences between em and rem in nested elements are:

em units produce compound effects:

/* Assuming body font size is 16px */
.parent {
  font-size: 1.5em; /* = 16px * 1.5 = 24px */
}

.child {
  font-size: 1.5em; /* = 24px * 1.5 = 36px */
}

.grandchild {
  font-size: 1.5em; /* = 36px * 1.5 = 54px */
}

rem units are not affected by nesting, always referencing root element size:

/* Assuming html font size is 16px */
.parent {
  font-size: 1.5rem; /* = 16px * 1.5 = 24px */
}

.child {
  font-size: 1.5rem; /* = 16px * 1.5 = 24px (still references root element) */
}

.grandchild {
  font-size: 1.5rem; /* = 16px * 1.5 = 24px (still references root element) */
}

This difference makes rem more suitable for globally consistent size control, while em is suitable for creating proportional relationships within specific elements. For example, you can use rem to set global font sizes and em to set headings, lists, and other elements within paragraphs, maintaining consistent proportions with surrounding content.

(3) Why is rem unit more recommended than px in responsive design?

Answer:In responsive design, rem units are more recommended than px for the following reasons:

Advantages	Explanation
Global Proportional Scaling	By only changing the root element's font size, all elements using rem on the webpage will adjust proportionally, simplifying media queries
Accessibility Support	Respects user's font size settings, more friendly to users with visual impairments
Maintainability	Easier to maintain proportionally consistent design systems because all dimensions are based on the same reference value
Device Adaptability	Easier to adapt to devices of different sizes without needing to set breakpoints for each element individually
Smooth Scaling	Combining with units like vw to set html's font size can achieve smooth scaling of element dimensions with window size

In practical development, a common pattern is to use rem to set layout dimensions and text sizes, then use media queries to adjust the root font size, thereby adjusting the entire page's proportions at once. This is more efficient and consistent than using px to adjust each element individually.