CSS clamp(): cỡ chữ linh hoạt, min() và max()

clamp() làm gì

clamp(MIN, PREFERRED, MAX) nhận ba giá trị và trả về giá trị ở giữa, miễn là nó còn nằm giữa hai giá trị kia. Cách dùng kinh điển là một tiêu đề to dần theo màn hình nhưng dừng lại ở những giới hạn hợp lý, không cần media query:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    h1 {
      font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
      margin: 0 0 8px;
      color: #111827;
    }
  </style>
</head>
<body>
  <h1>Fluid heading</h1>
  <p id="out"></p>
  <script>
    const show = () => {
      document.getElementById('out').textContent =
        'Preview width ' + innerWidth + 'px, heading font-size ' + getComputedStyle(document.querySelector('h1')).fontSize;
    };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

Giá trị ưu tiên là 1rem + 3vw: 16px cộng 3% chiều rộng. Trong khung xem trước rộng 800px, giá trị này là 16 + 24 = 40px, nằm giữa 24px (1.5rem) và 48px (3rem), nên tiêu đề cỡ 40px. Trên điện thoại rộng 320px, giá trị ưu tiên là 25.6px. Khi rộng hơn 1067px, nó sẽ vượt 48px, nên dừng ở 48px. Hãy thay đổi kích thước cửa sổ để xem con số thay đổi; vw ở đây là phần trăm chiều rộng của khung xem trước.

Xem kết quả mà không cần đổi kích thước cửa sổ

vw bám theo viewport, thứ bạn khó thay đổi trong lúc đang đọc. Đơn vị container query thì bám theo một container: cqi bằng 1% chiều rộng của container. Kéo thanh trượt để thay đổi hộp, và một clamp() tương tự sẽ phản hồi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp with a slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box { container-type: inline-size; background: #e5e7eb; padding: 12px; margin-top: 10px; box-sizing: border-box; }
    .title { font-size: clamp(1.25rem, 0.5rem + 6cqi, 2.5rem); font-weight: 700; margin: 0; }
  </style>
</head>
<body>
  <label>box width <input id="w" type="range" min="200" max="760" value="480"></label>
  <div class="box" id="box"><p class="title">Resizable title</p></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    const title = document.querySelector('.title');
    const update = () => {
      box.style.width = document.getElementById('w').value + 'px';
      const size = parseFloat(getComputedStyle(title).fontSize);
      const note = size <= 20 ? ' (at MIN)' : size >= 40 ? ' (at MAX)' : ' (preferred value)';
      document.getElementById('out').textContent = 'box ' + box.offsetWidth + 'px: font-size ' + size.toFixed(1) + 'px' + note;
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

Kéo về đầu, tiêu đề dừng ở 20px (MIN). Kéo về cuối, nó dừng ở 40px (MAX). Ở giữa, nó theo 0.5rem + 6cqi. Đây chính là cơ chế của phiên bản dùng vw, chỉ với một cây thước nhỏ hơn.

Ba đối số

font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
/*               MIN   PREFERRED     MAX    */

Bạn có thể tính toán ngay trong mỗi đối số mà không cần viết calc(): 1rem + 2vw dùng nguyên như vậy là được. Dấu + và - cần một dấu cách ở cả hai bên, nếu không cả khai báo sẽ không hợp lệ.

Nếu MIN lớn hơn MAX, MIN thắng: clamp(3rem, 5vw, 2rem) luôn là 3rem.

Tính giá trị ở giữa

Để cỡ chữ tăng từ 16px trên màn hình 320px lên 24px trên màn hình 1280px:

1. Độ dốc: (24 − 16) ÷ (1280 − 320) = 8 ÷ 960 = 0.00833, tức là 0.833vw (vw tính trên mỗi 100px).
2. Điểm xuất phát: 16px − 0.00833 × 320px = 13.33px, tức là 0.833rem.
3. Đặt các giới hạn bao quanh:

font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);

Ở chiều rộng 320px, kết quả là 13.33 + 2.67 = 16px, ở 1280px là 13.33 + 10.67 = 24px, và ngoài khoảng đó nó giữ ở các giới hạn. Các "công cụ tính clamp" trên mạng làm đúng phép tính này.

min() và max()

clamp() là sự kết hợp của hai hàm đơn giản hơn:

• min(a, b) trả về giá trị nhỏ hơn, nên nó đặt giới hạn trên.
• max(a, b) trả về giá trị lớn hơn, nên nó đặt giới hạn dưới.
• clamp(MIN, VAL, MAX) giống hệt max(MIN, min(VAL, MAX)).

Lúc đầu tên gọi nghe có vẻ ngược: để nói "tối đa 600px", bạn dùng min().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      width: min(100%, 420px);          /* full width, but at most 420px */
      padding: max(12px, 3%);           /* at least 12px */
      margin-bottom: 10px;
      background: #2563eb;
      color: white;
      box-sizing: border-box;
    }
    .narrow { width: 260px; }
  </style>
</head>
<body>
  <div class="card" id="a">In the full preview</div>
  <div class="narrow"><div class="card" id="b">In a 260px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = ['a', 'b'].map((id) => {
      const el = document.getElementById(id);
      return id + ': width ' + el.offsetWidth + 'px, padding ' + getComputedStyle(el).paddingTop;
    }).join('  |  ');
  </script>
</body>
</html>

Trong khung xem trước rộng, thẻ đầu tiên dừng ở 420px. Bên trong phần tử cha rộng 260px, 100% là giá trị nhỏ hơn, nên thẻ thứ hai rộng 260px. max(12px, 3%) cho thẻ đầu tiên 3% chiều rộng phần tử cha (body: khoảng 23.5px trong khung xem trước 800px), còn thẻ thứ hai được 12px, vì 3% của 260px (7.8px) thấp hơn mức sàn.

width: min(100%, 420px) thay cho cặp khai báo cũ width: 100%; max-width: 420px; chỉ bằng một khai báo.

Không chỉ cỡ chữ: khoảng cách và chiều rộng

clamp() dùng được trong mọi thuộc tính nhận độ dài. Phần trăm trong giá trị ở giữa khiến một thành phần co giãn theo phần tử cha thay vì theo viewport:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clamp spacing</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { background: #e5e7eb; margin-bottom: 10px; }
    .card {
      width: clamp(200px, 80%, 520px);  /* 80% of the parent, within limits */
      padding: clamp(10px, 5%, 32px);   /* % padding is relative to the parent's width */
      box-sizing: border-box;
      background: #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="parent" style="width: 300px"><div class="card">In a 300px parent</div></div>
  <div class="parent" style="width: 760px"><div class="card">In a 760px parent</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.card')]
      .map((c) => c.offsetWidth + 'px wide, padding ' + getComputedStyle(c).paddingTop).join('  |  ');
  </script>
</body>
</html>

Trong phần tử cha rộng 300px, thẻ rộng 240px (80%) với padding 15px (5% của 300px). Trong phần tử cha rộng 760px, 80% sẽ là 608px, nên thẻ dừng ở mức tối đa 520px, và 5% của 760px là 38px, nên padding dừng ở 32px.

Khả năng tiếp cận: giữ rem trong giá trị ở giữa

Cỡ chữ chỉ dùng vw, như font-size: 5vw, không to lên khi người đọc tăng cỡ chữ mặc định trong cài đặt trình duyệt, và cũng không to lên khi phóng to trình duyệt, vì phóng to làm viewport hẹp lại tính theo pixel CSS. Thêm một phần rem (1rem + 2vw) và các giới hạn bằng rem giúp chữ luôn gắn với cài đặt của người đọc. Trang đơn vị giải thích chi tiết về rem và vw.

Lỗi thường gặp

• Dùng min() cho giá trị tối thiểu. min() chọn giá trị nhỏ hơn, tức là giới hạn trên. Để có "ít nhất 12px", dùng max(12px, ...).
• Không có dấu cách quanh + hoặc -. clamp(1rem, 1rem+2vw, 3rem) không hợp lệ, và thuộc tính quay về giá trị trước đó.
• Chỉ có vw ở giữa. Khi đó chữ bỏ qua cài đặt cỡ chữ của người đọc. Hãy thêm một thành phần rem.
• MIN lớn hơn MAX. Kết quả luôn là MIN, hiếm khi đúng ý định.
• Giới hạn bằng px cho cỡ chữ. Chúng chặn kích thước chữ ngay cả với người đọc cần chữ to hơn. Hãy dùng rem.