px→vh 変換ツール

/* 制限付きレスポンシブ高さ */
.hero-section {
  height: clamp(400px, 50vh, 900px);
  /* 最小: 400px, 推奨: 50vh, 最大: 900px */
}

.card {
  height: clamp(200px, 30vh, 500px);
  /* 200pxから500pxの間でスケーリング */
}

.section {
  padding: clamp(2rem, 5vh, 6rem) 1rem;
  /* 制約付きレスポンシブパディング */
}

/* 800pxを超えない */
.section {
  height: min(80vh, 800px);
}

/* 300pxより小さくならない */
.card {
  height: max(30vh, 300px);
}

/* 最大高さ制限付きレスポンシブ高さ */
.modal {
  height: min(90vh, 700px);
  /* ビューポートの90%だが700pxを超えない */
}

/* 解決策1: min-heightを使用 */
.full-height {
  min-height: 100vh;
  height: auto;
}

/* 解決策2: dvh(動的ビューポート高さ)を使用 */
.modern-full-height {
  height: 100dvh; /* モダンブラウザで推奨 */
}

/* 解決策3: svh(スモールビューポート高さ)を使用 */
.safe-full-height {
  height: 100svh; /* UI表示時の最小高さ */
}

/* 解決策4: フォールバックを追加 */
.hero {
  height: 100vh;
  height: 100dvh;
  min-height: 600px; /* フォールバック */
}

/* 固定ベース + ビューポートスケーリング */
.section {
  padding-top: calc(2rem + 5vh);
  padding-bottom: calc(2rem + 5vh);
}

/* フルハイトからヘッダー/フッターを引く */
.main-content {
  height: calc(100vh - 120px);
  /* 60pxヘッダー + 60pxフッター */
}

/* 複数単位の組み合わせ */
.card {
  height: min(calc(100vh - 200px), 800px);
  /* 余白を考慮した高さ、最大800px */
}

/* メディアクエリによる調整 */
@media (max-width: 768px) {
  .section {
    padding: calc(1rem + 3vh) 1rem;
  }
}