Thiết lập cỡ chữ phản hồi (responsive) với CSS

Đơn vị viewport width (vw)

Để cỡ chữ tự động thay đổi theo chiều rộng khung nhìn (viewport), sử dụng đơn vị vw (viewport width). 1vw = 1% chiều rộng viewport.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      font-size: 8vw;
    }
  </style>
</head>
<body>
  <h1>Đây là tiêu đề demo</h1>
  <p>Đây là văn bản demo.</p>
</body>
</html>

Khi thu hẹp hoặc mở rộng trình duyệt, cỡ chữ tiêu đề sẽ tự động co giãn tương ứng. Kết hợp với min-font-size và max-font-size (qua clamp()) để kiểm soát tốt hơn.