The unit usage specification

Unit Usage Standards

The choice of units in CSS directly affects layout precision and responsive effects. Incorrect unit usage can lead to uncontrolled element sizing, abnormal text scaling, or failed media queries. Proper use of absolute units, relative units, and viewport units ensures cross-device compatibility.

Use Cases for Absolute Units

Absolute units are suitable for scenarios requiring fixed dimensions. px is the most common absolute unit, where 1px equals one physical pixel on the screen. In print stylesheets, pt (1pt = 1/72 inch) or cm/mm and other physical units should be prioritized.

/* Print stylesheet example */
@media print {
  .page {
    width: 210mm; /* A4 paper width */
    padding: 20pt;
    font-size: 12pt;
  }
}

Notes:

• Border widths should always use px
• Screen media queries should use px instead of em/rem
• For high-precision needs (e.g., shadow offsets), use px

Core Applications of Relative Units

Cascading Calculations with em

em is calculated based on the current element's font size and has cascading characteristics. Pay special attention to the calculation base when used in nested elements:

.article {
  font-size: 16px;
  padding: 2em; /* 32px */
}

.article .section {
  font-size: 0.8em; /* 12.8px */
  margin: 1em; /* Calculated based on 12.8px */
}

Global Control with rem

rem is always relative to the root element's (html) font size, making it suitable for building scalable modular systems:

html {
  font-size: 62.5%; /* 10px/16px */
}

.component {
  width: 24rem; /* 240px */
  font-size: 1.4rem; /* 14px */
}

When adjusting for responsiveness, only modify the root font size:

@media (min-width: 1200px) {
  html {
    font-size: 75%; /* 12px baseline */
  }
}

Dynamic Adaptation with Viewport Units

Viewport units are suitable for full-screen layout elements:

• vw/vh: 1% of the viewport width/height
• vmin/vmax: Takes the smaller/larger value between vw and vh

.hero-banner {
  height: 100vh;
  padding: 5vmin; /* Ensures padding adapts to different orientations */
}

.font-responsive {
  font-size: calc(1rem + 1vw); /* Base size + dynamic adjustment */
}

Notes:

• Avoid using vh alone, as mobile browser address bars can affect calculations
• Combine with calc() for flexible sizing
• Use vmin in @media queries to adapt to square areas

Special Behavior of Percentage Units

Percentage units behave differently depending on the property:

.container {
  width: 80%; /* Relative to parent width */
  padding-top: 50%; /* Relative to its own width (creates a proportional container) */
  font-size: 120%; /* Relative to inherited font size */
}

/* Proportional container example */
.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Cases for Unitless Values

The following properties allow unitless values:

.line-height {
  line-height: 1.5; /* 1.5 times the font size */
}

.flex-grow {
  flex-grow: 2; /* Flex expansion coefficient */
}

.grid-template {
  grid-template-columns: repeat(3, 1fr); /* Fractional unit */
}

Unit Combination Strategies

Mixed Units for Flexible Layouts

.card {
  width: min(90vw, 600px); /* Responsive width not exceeding 600px */
  margin: 2rem clamp(1rem, 5vw, 3rem);
}

/* Fluid typography technique */
:root {
  --min-font: 16px;
  --max-font: 22px;
  --scaler: 5vw;
}
.headline {
  font-size: clamp(
    var(--min-font),
    calc(var(--min-font) + var(--scaler)),
    var(--max-font)
  );
}

Unit Inheritance with Custom Properties

:root {
  --base-spacing: 1rem;
  --large-spacing: calc(var(--base-spacing) * 2);
}

.module {
  padding: var(--base-spacing);
}

.module-large {
  padding: var(--large-spacing);
}

Considerations for Unit Conversion

When using calc(), maintain unit consistency:

/* Correct approach */
.spacing {
  margin: calc(1rem + 2px); /* Mixed units must be explicitly labeled */
}

/* Incorrect example */
.invalid {
  width: calc(100% - 20); /* Missing unit */
}

Unit Selection in Media Queries

Media queries should always use px units:

/* Recommended */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Not recommended to use em in media queries */
@media (min-width: 48em) {
  /* Calculations dependent on root font size may yield unexpected results */
}

Units in Animations and Transforms

For displacement transforms, combine px and %:

.slide-in {
  transform: translateX(calc(100% + 20px));
}

.zoom-effect {
  transform: scale(1.2) translateY(30px);
}

Time units should be explicitly specified:

.transition {
  transition: transform 300ms ease-in-out;
}

.animation {
  animation: slide 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

Guidelines for Color Units

• RGB/RGBA: For transparency control
• HSL/HSLA: Suitable for programmatic color adjustments
• HEX: Concise representation for static colors

:root {
  --primary-rgb: 34, 139, 230;
  --primary-hsl: 206, 80%, 52%;
}

.button {
  color: #228BE6;
  background-color: rgba(var(--primary-rgb), 0.1);
  border-color: hsl(var(--primary-hsl));
}

Performance Impact of Unit Choices

• vw/vh units trigger layout recalculations
• % units increase style calculation costs in complex nesting
• Compound transforms (translate + scale) are better than modifying width/height

/* Performance optimization example */
.optimized {
  /* Avoid */
  width: calc(100% - 20px);
  
  /* Recommended */
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

Integrating Units with Design Systems

Establish unit conversion baselines:

/* Design system foundation */
:root {
  --base-unit: 8px;
  --space-xs: calc(var(--base-unit) * 0.5); /* 4px */
  --space-sm: var(--base-unit); /* 8px */
  --space-md: calc(var(--base-unit) * 2); /* 16px */
}

/* Usage example */
.form-item {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}