この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
clamp() 関数の仕組み
メディアクエリ（@media）を使うと、フォントサイズはブレイクポイントで「カクッ」と段階的に変わります。
clamp() 関数を使うと、フォントサイズが画面幅に応じて滑らかに変化するレイアウトを実現できます。これは「Fluid Typography」と呼ばれます。
clamp() 関数は最小値、推奨値、最大値の3つを指定します。
clamp(MIN, PREF, MAX)
-
MIN（最小値）：これ以上小さくならないという下限 -
PREF（推奨値）：この値が基本になるが、画面幅に応じて変化する値（vw単位など）を指定 -
MAX（最大値）：これ以上大きくならないという上限
ブラウザは PREF の値を採用しようとしますが、それが MIN より小さくなったら MIN を、MAX より大きくなったら MAX を採用します。
例えば、font-size: clamp(24px, 5vw, 60px); は、次のような意味になります。
- 基本は画面幅の5%（
5vw）のサイズになる - ただし、
5vwが24pxより小さくなっても、24pxを下回らない - そして、
5vwが60pxより大きくなっても、60pxを上回らない
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0073</title>
</head>
<body>
<h1 style="font-size: clamp(1.5rem, 4vw, 3rem);">こんにちは</h1>
</body>
</html>