Responsive Web Design（RWD） - daniel-qa/Vue GitHub Wiki

<template>
  <div class="card">
    <h2>標題</h2>
    <p>內容</p>
  </div>
</template>

<style scoped>
.card {
  width: clamp(320px, 90%, 1200px);  /* 最小320，最大1200，佔90%寬度 */
  padding: clamp(10px, 5vw, 40px);   /* 補齊：10px ~ 40px，自動跟著螢幕調整 */
  font-size: clamp(14px, 2.5vw, 20px); /* 字體大小跟著螢幕變 */
  margin: 0 auto;
}
</style>

5vw 部分 = 「敏感度」
├─ 螢幕 320px  → 5vw = 16px   ← 會用最小值 24px（clamp 限住）
├─ 螢幕 1000px → 5vw = 50px   ← 會用最大值 48px（clamp 限住）
└─ 螢幕 480px  → 5vw = 24px   ← 自由範圍內，隨螢幕變