PX to VW 変換ツール

/* 制限付きレスポンシブフォントサイズ */
h1 {
  font-size: clamp(24px, 3.13vw, 60px);
  /* 最小: 24px, 推奨: 3.13vw, 最大: 60px */
}

.hero-text {
  font-size: clamp(1rem, 2.5vw, 3rem);
  /* 16pxから48pxの間でスケーリング */
}

.container {
  padding: clamp(1rem, 3vw, 4rem);
  /* 制約付きレスポンシブパディング */
}

/* 48pxを超えない */
h2 {
  font-size: min(2.5vw, 48px);
}

/* 16pxより小さくならない */
p {
  font-size: max(1vw, 16px);
}

/* 最大幅制限付きレスポンシブ幅 */
.card {
  width: min(90vw, 800px);
  /* ビューポートの90%だが800pxを超えない */
}

/* 解決策1: パーセンテージを使用 */
.full-width {
  width: 100%; /* 100vwより適切 */
}

/* 解決策2: スクロールバーを考慮 */
.section {
  width: calc(100vw - var(--scrollbar-width, 17px));
}

/* 解決策3: dvw(動的ビューポート幅)を使用 */
.modern-full-width {
  width: 100dvw; /* モダンブラウザでスクロールバーを除外 */
}

/* 横スクロールを完全に防ぐ */
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ベースフォントサイズをビューポートでスケーリング */
html {
  font-size: clamp(14px, 1vw, 18px);
}

/* すべての要素はrem(ルートに相対的)を使用 */
h1 {
  font-size: 2.5rem; /* ルートでスケーリング */
}

p {
  font-size: 1rem;
}

/* 両方の単位でcalcを使用したスペーシング */
.container {
  padding: calc(1rem + 2vw);
  /* 固定ベース + ビューポートスケーリング */
}

/* メディアクエリによる調整 */
@media (max-width: 768px) {
  html {
    font-size: clamp(12px, 2vw, 16px);
  }
}