CSS參數、RWD範例

參考至：https://codepen.io/Wcc723/pen/JjodQVJ

by wllai2001

HTML

<h1>標題</h1>
<p>文字會隨著顯示寬度調整大小</p>

<p class="content"></p>

CSS

:root {
  --font-size: 14px;
  --text: 'Mobile Size!'
}

h1 {
  font-size: calc(var(--font-size) * 1.5);
}
p {
  font-size: var(--font-size);
}
.content:before {
  content: var(--text);
}

@media (min-width: 480px) {
  :root {
    --font-size: 18px;
    --text: 'Tablet Size!'
  }
}

@media (min-width: 768px) {
  :root {
    --font-size: 24px;
    --text: 'Desktop Size!'
  }
}