CSS Dynamic Viewport Units Generator

/* ===========================================
   CSS Dynamic Viewport Units
   =========================================== */

/*
 * Viewport Unit Types:
 * - svh/svw/svi/svb: Small viewport (UI maximally shown)
 * - lvh/lvw/lvi/lvb: Large viewport (UI minimally shown)
 * - dvh/dvw/dvi/dvb: Dynamic viewport (adjusts with UI)
 */

/* Basic Usage */
.hero-section {
  /* Fallback */
  min-height: 100vh;
  /* Dynamic - adjusts as mobile browser UI changes */
  min-height: 100dvh;
}

/* CSS Custom Properties for Flexibility */
:root {
  /* Small viewport - safe minimum size */
  --viewport-height-small: 100svh;
  --viewport-width-small: 100svw;

  /* Large viewport - maximum available size */
  --viewport-height-large: 100lvh;
  --viewport-width-large: 100lvw;

  /* Dynamic viewport - real-time size */
  --viewport-height-dynamic: 100dvh;
  --viewport-width-dynamic: 100dvw;
}

/* Full-Screen Hero Section */
.hero {
  min-height: 100vh; /* Fallback */
  min-height: 100dvh; /* Dynamic for smooth mobile experience */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fixed Bottom Navigation (Mobile-Safe) */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Use svh to ensure it's always visible above mobile browser UI */
  height: calc(100svh - 100dvh + 60px);
  min-height: 60px;
}

/* Sidebar with Large Viewport */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh; /* Fallback */
  height: 100lvh; /* Large - full height without browser UI */
  width: 280px;
}

/* Responsive Typography */
.responsive-heading {
  font-size: 4vmin; /* Fallback */
  font-size: 4dvmin; /* Dynamic minimum dimension */
}

/* Centered Modal */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 90vh; /* Fallback */
  max-height: 90svh; /* Small - always fits */
  max-width: 90vw;
  max-width: 90svw;
  overflow: auto;
}

/* Scroll Snap Container */
.snap-container {
  height: 100vh; /* Fallback */
  height: 100dvh; /* Dynamic for smooth scrolling on mobile */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.snap-section {
  height: 100vh; /* Fallback */
  height: 100dvh;
  scroll-snap-align: start;
}

/* Writing Mode Aware (Logical Units) */
.vertical-text {
  writing-mode: vertical-rl;
  /* svi/dvi = inline size (width in horizontal, height in vertical) */
  width: 50dvi;
  /* svb/dvb = block size (height in horizontal, width in vertical) */
  height: 100dvb;
}

/* Feature Detection */
@supports (height: 100dvh) {
  .hero {
    min-height: 100dvh;
  }
}

@supports not (height: 100dvh) {
  .hero {
    min-height: 100vh;
    /* JavaScript-based fallback might be needed */
    min-height: calc(var(--vh, 1vh) * 100);
  }
}

/* JavaScript Fallback for Older Browsers */
/*
<script>
  // Set --vh custom property for browsers without dvh support
  function setVH() {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  }

  window.addEventListener('resize', setVH);
  window.addEventListener('orientationchange', setVH);
  setVH();
</script>
*/

/* Comparison: Different Viewport Units */
.comparison-demo {
  --small-height: 100svh;   /* Smallest possible (UI shown) */
  --large-height: 100lvh;   /* Largest possible (UI hidden) */
  --dynamic-height: 100dvh; /* Current actual height */

  /* The difference is most noticeable on mobile browsers */
  /* where address bar and navigation can show/hide */
}