Skip to Content
DocsDeveloper GuideCSS & StylingResponsive Design

Responsive Design

WebF provides responsive design capabilities that enable you to build adaptive interfaces. This guide covers CSS units, viewport units, and responsive values with real examples from the WebF showcase.

CSS Units

WebF supports both absolute and relative CSS units for creating responsive layouts.

Absolute Units

/* Pixels - fixed size */
width: 100px;
height: 60px;

Relative Units

rem (root em)

Relative to the root font size (typically 16px by default):

/* 10rem = 160px (assuming 16px base font size) */
width: 10rem;
height: 60px;

em

Relative to the element’s font size:

/* 10em depends on element's font-size */
.element {
  font-size: 14px;
  width: 10em; /* 10 × 14px = 140px */
}

Viewport Units

vw (viewport width)

Percentage of the viewport’s width:

/* 20vw = 20% of viewport width */
width: 20vw;
vh (viewport height)

Percentage of the viewport’s height:

/* 20vh = 20% of viewport height */
height: 20vh;

Practical Example

Here’s a real example showing different units side by side:

<div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
  {/* Fixed pixel width */}
  <div style={{ width: 100, height: 60, backgroundColor: '#e5e7eb' }}>
    100px
  </div>
 
  {/* Root em (10rem = 160px with 16px base) */}
  <div style={{ width: '10rem', height: 60, backgroundColor: '#e5e7eb' }}>
    10rem
  </div>
 
  {/* Element em (depends on font-size) */}
  <div style={{ width: '10em', height: 60, fontSize: 14, backgroundColor: '#e5e7eb' }}>
    10em (fs=14)
  </div>
 
  {/* Viewport width */}
  <div style={{ width: '20vw', height: 60, backgroundColor: '#e5e7eb' }}>
    20vw
  </div>
 
  {/* Viewport height */}
  <div style={{ width: '20vh', height: 60, backgroundColor: '#e5e7eb' }}>
    20vh
  </div>
</div>

Key Points:

  • 100px is always 100 pixels
  • 10rem = 160px when root font-size is 16px
  • 10em varies based on the element’s font-size (140px when font-size is 14px)
  • 20vw = 20% of viewport width (dynamic based on screen size)
  • 20vh = 20% of viewport height (dynamic based on screen size)

calc() Function

The calc() function allows you to perform calculations with mixed units:

Basic calc() Examples

/* Mix percentage and pixels */
width: calc(50% - 20px);
 
/* Mix rem and pixels */
width: calc(10rem + 10px);

Practical Use Cases

Container with Offset

<div style={{ width: 'calc(50% - 20px)', height: 60, backgroundColor: '#e5e7eb' }}>
  calc(50% - 20px)
</div>

This creates an element that is 50% of its parent’s width minus 20 pixels, useful for creating gutters or spacing.

Fixed + Relative Sizing

<div style={{ width: 'calc(10rem + 10px)', height: 60, backgroundColor: '#e5e7eb' }}>
  calc(10rem + 10px)
</div>

Combines the scalability of rem units with precise pixel adjustments.

Common calc() Patterns

/* Full width minus fixed gutters */
width: calc(100% - 40px);
 
/* Full viewport minus header and footer */
height: calc(100vh - 80px);
 
/* Responsive spacing */
padding: calc(2rem + 1vw);
 
/* Grid columns with gaps */
width: calc(33.333% - 16px);

Responsive Layout Patterns

Full-Width Containers

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

Viewport-Based Sizing

/* Full viewport height hero section */
.hero {
  height: 100vh;
  width: 100vw;
}
 
/* Responsive padding based on viewport */
.section {
  padding: 2vw;
}

Flexible Grids with calc()

/* Two-column grid with 20px gap */
.column {
  width: calc(50% - 10px);
  float: left;
  margin-right: 20px;
}
 
.column:last-child {
  margin-right: 0;
}
 
/* Three-column grid with 30px gap total */
.column-third {
  width: calc(33.333% - 20px);
}

Media Queries

Note: This section contains conceptual examples. For tested implementations, refer to your web framework’s responsive design patterns.

Basic Media Queries

/* Mobile first approach (recommended) */
.element {
  /* Mobile styles */
  padding: 10px;
}
 
/* Tablet and up */
@media (min-width: 768px) {
  .element {
    padding: 20px;
  }
}
 
/* Desktop and up */
@media (min-width: 1024px) {
  .element {
    padding: 40px;
  }
}

Common Breakpoints

/* Small devices (large phones, 576px and up) */
@media (min-width: 576px) { }
 
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { }
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { }
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }

Orientation

/* Portrait mode */
@media (orientation: portrait) {
  .element {
    /* Portrait styles */
  }
}
 
/* Landscape mode */
@media (orientation: landscape) {
  .element {
    /* Landscape styles */
  }
}

CSS Variables for Responsive Design

Basic Variables

:root {
  --primary-color: #007bff;
  --spacing-unit: 8px;
  --font-size-base: 16px;
}
 
.element {
  color: var(--primary-color);
  padding: var(--spacing-unit);
  font-size: var(--font-size-base);
}

Responsive Variables with Media Queries

:root {
  /* Mobile variables */
  --container-padding: 16px;
  --font-size-heading: 24px;
}
 
@media (min-width: 768px) {
  :root {
    /* Tablet variables */
    --container-padding: 24px;
    --font-size-heading: 32px;
  }
}
 
@media (min-width: 1024px) {
  :root {
    /* Desktop variables */
    --container-padding: 40px;
    --font-size-heading: 48px;
  }
}
 
/* Use the variables */
.container {
  padding: var(--container-padding);
}
 
.heading {
  font-size: var(--font-size-heading);
}

Variable Fallbacks

.element {
  /* Provide fallback value */
  color: var(--custom-color, #007bff);
 
  /* Chain fallbacks */
  padding: var(--spacing-lg, var(--spacing-md, 20px));
}

Responsive Typography

Fluid Typography with clamp()

/* Heading that scales between 2rem and 4rem */
.heading-1 {
  font-size: clamp(2rem, 5vw, 4rem);
}
 
/* Body text that scales between 1rem and 1.125rem */
.body {
  font-size: clamp(1rem, 2vw, 1.125rem);
}

Viewport-Based Typography

/* Font size that scales with viewport */
.text {
  font-size: calc(16px + 0.5vw);
}
 
/* Better approach with clamp for min/max bounds */
.heading {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

Best Practices

1. Use Relative Units

/* ✅ Good: Relative units */
.element {
  padding: 1rem;
  font-size: 1.125rem;
  width: 80%;
}
 
/* ❌ Avoid: Fixed pixels for everything */
.element {
  padding: 16px;
  font-size: 18px;
  width: 800px;
}

2. Mobile-First Approach

/* ✅ Good: Mobile first with min-width */
.element {
  font-size: 16px;
}
 
@media (min-width: 768px) {
  .element {
    font-size: 18px;
  }
}
 
/* ❌ Avoid: Desktop first with max-width */
.element {
  font-size: 18px;
}
 
@media (max-width: 767px) {
  .element {
    font-size: 16px;
  }
}

3. Use calc() for Precision

/* ✅ Good: calc() for exact spacing */
.sidebar {
  width: calc(100% - 250px);
}
 
.content {
  height: calc(100vh - 60px);
}

4. Combine Units Wisely

/* Mix viewport and fixed units */
.element {
  width: calc(100vw - 40px);
  padding: calc(1rem + 1vw);
}
 
/* Use clamp for bounded scaling */
.heading {
  font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}

5. Test Responsive Behavior

When using viewport units and calc():

  • Test at different viewport sizes
  • Verify calculations at breakpoint boundaries
  • Check minimum and maximum values with clamp()

Common Responsive Patterns

Full-Width with Constraints

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 calc(2rem + 2vw);
}

Responsive Spacing

.section {
  /* Scales from 16px to 48px based on viewport */
  padding: clamp(1rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 5vh, 4rem);
}

Flexible Widths

.card {
  /* 90% width on mobile, 600px max on larger screens */
  width: min(90%, 600px);
  margin: 0 auto;
}

What’s Supported

WebF fully supports:

  • ✅ All CSS units (px, rem, em, %, vw, vh, vmin, vmax)
  • ✅ calc() function with mixed units
  • ✅ CSS custom properties (variables)
  • ✅ Media queries (@media)
  • ✅ clamp(), min(), max() functions

What’s Not Fully Tested

  • Container queries (@container) - may have limited support
  • Some advanced viewport units (dvh, lvh, svh) - check compatibility

For a complete list of supported CSS properties, check the CSS Support Reference.

Next Steps

AnimationsWebFListView