PX转VH转换器

/* 带限制的响应式高度 */
.hero {
  height: clamp(300px, 50vh, 800px);
  /* 最小值: 300px, 首选值: 50vh, 最大值: 800px */
}

.section {
  min-height: clamp(400px, 60vh, 900px);
  /* 在400px到900px之间缩放 */
}

.modal {
  max-height: clamp(300px, 80vh, 1000px);
  /* 带约束的响应式最大高度 */
}

/* 永远不超过600px */
.banner {
  height: min(50vh, 600px);
}

/* 永远不小于300px */
.section {
  min-height: max(40vh, 300px);
}

/* 带最大值限制的响应式高度 */
.card {
  height: min(80vh, 800px);
  /* 占视口80%但不超过800px */
}

/* 方案1：使用dvh（动态视口高度） */
.full-height {
  height: 100dvh; /* 自动适应地址栏变化 */
}

/* 方案2：使用svh（小视口高度） */
.stable-height {
  height: 100svh; /* 最小可用高度 */
}

/* 方案3：使用lvh（大视口高度） */
.max-height {
  height: 100lvh; /* 最大可用高度 */
}

/* 方案4：CSS变量 + JavaScript */
:root {
  --vh: 1vh; /* 由JS动态设置 */
}
.custom-height {
  height: calc(var(--vh, 1vh) * 100);
}

// 方法1：动态设置CSS变量（推荐）
function setVhVariable() {
  // 获取真实的视口高度
  const vh = window.innerHeight * 0.01;
  // 设置CSS变量 --vh 为实际视口高度的1%
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 页面加载时设置
setVhVariable();

// 监听窗口大小变化（包括地址栏显示/隐藏）
window.addEventListener('resize', setVhVariable);
window.addEventListener('orientationchange', setVhVariable);

/* CSS中使用 */
.full-height {
  height: 100vh; /* 不支持CSS变量的浏览器降级方案 */
  height: calc(var(--vh, 1vh) * 100);
}

// 方法2：直接计算并应用样式
function setFullHeight(element) {
  element.style.height = window.innerHeight + 'px';
}

// 使用示例
const heroSection = document.querySelector('.hero');
setFullHeight(heroSection);

window.addEventListener('resize', () => setFullHeight(heroSection));

/* 全屏首屏区 */
.hero {
  height: 100dvh; /* 动态适应 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 分屏布局 */
.split-layout {
  display: grid;
  grid-template-rows: 40vh 60vh;
  height: 100dvh;
}

/* 滚动容器 */
.scrollable-section {
  height: clamp(400px, 70vh, 1200px);
  overflow-y: auto;
}

/* 固定定位元素 */
.sidebar {
  position: fixed;
  height: 100vh;
  overflow-y: auto;
}