Thẻ kẹp

Trong bản minh hoạ này, bạn sẽ thiết lập chiều rộng bằng cách sử dụng clamp() như sau: width: clamp(<min>, <actual>, <max>).

Hàm này đặt kích thước tối thiểu và tối đa tuyệt đối cũng như kích thước thực tế. Với các giá trị, các giá trị đó có thể có dạng như sau:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

Kích thước tối thiểu ở đây là 23ch hoặc 23 đơn vị ký tự và kích thước tối đa là 46ch, 46 ký tự. Đơn vị chiều rộng ký tự dựa trên kích thước phông chữ của phần tử (cụ thể là chiều rộng của ký tự 0). Kích thước "thực tế" là 50%, chiếm 50% chiều rộng mẹ của phần tử này.

Chức năng của hàm clamp() ở đây là cho phép phần tử này giữ lại chiều rộng 50% cho đến khi 50% lớn hơn 46ch (trên khung nhìn rộng hơn) hoặc nhỏ hơn 23ch (trên khung nhìn nhỏ hơn). Trong video, hãy xem chiều rộng của thẻ này tăng đến điểm tối đa được kẹp và giảm đến điểm tối thiểu bị kẹp khi chiều rộng của thẻ tăng lên và thu nhỏ như thế nào. Sau đó, mẫu này vẫn ở giữa phần tử mẹ bằng cách sử dụng các thuộc tính khác để căn giữa nó. Việc này giúp tạo bố cục dễ đọc hơn vì văn bản sẽ không quá rộng (trên 46ch) hoặc quá hẹp và hẹp (dưới 23ch).

Bạn có thể sử dụng kỹ thuật này để triển khai kiểu chữ thích ứng. Ví dụ: font-size: clamp(1.5rem, 20vw, 3rem). Trong trường hợp này, kích thước phông chữ của dòng tiêu đề sẽ luôn giới hạn trong khoảng từ 1.5rem đến 3rem nhưng sẽ tăng và thu nhỏ dựa trên giá trị thực tế 20vw để phù hợp với chiều rộng của khung nhìn.

Đây là một kỹ thuật tuyệt vời để đảm bảo mức độ dễ đọc với giá trị kích thước tối thiểu và tối đa, nhưng hãy nhớ rằng kỹ thuật này không được hỗ trợ trong tất cả các trình duyệt hiện đại. Vì vậy, hãy đảm bảo bạn có bản dự phòng và tiến hành kiểm thử.

HTML

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }