max()

Try it

width: max(20vw, 400px);

width: max(20vw, 100px);

width: max(5vw, 100px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <img
      alt="Firefox logo"
      class="logo"
      src="/shared-assets/images/examples/firefox-logo.svg" />
  </div>
</section>

Trong ví dụ đầu tiên được hiển thị ở trên, chiều rộng sẽ ít nhất là 400px, nhưng sẽ rộng hơn nếu viewport rộng hơn 2000px (trong trường hợp đó 1vw sẽ là 20px, nên 20vw sẽ là 400px). Kỹ thuật này sử dụng một đơn vị tuyệt đối để chỉ định giá trị tối thiểu cố định cho thuộc tính và một đơn vị tương đối để cho phép giá trị tăng lên phù hợp với các viewport lớn hơn.

Cú pháp

max(1, 2, 3)
max(1px, 2px, 3px)

Tham số

Hàm max() nhận một hoặc nhiều biểu thức phân cách bằng dấu phẩy làm tham số, với giá trị biểu thức lớn nhất (dương nhất) được sử dụng làm giá trị của thuộc tính được gán cho nó.

Các biểu thức có thể là biểu thức toán học (sử dụng các toán tử số học), giá trị ký tự hoặc các biểu thức khác, chẳng hạn như attr(), đánh giá thành một kiểu đối số hợp lệ (như <length>), hoặc các hàm min() và max() lồng nhau.

Bạn có thể dùng các đơn vị khác nhau cho mỗi giá trị trong biểu thức của mình. Bạn cũng có thể dùng dấu ngoặc để thiết lập thứ tự tính toán khi cần.

Ghi chú

• Các biểu thức toán học liên quan đến phần trăm cho chiều rộng và chiều cao trên các cột bảng, nhóm cột bảng, hàng bảng, nhóm hàng bảng và ô bảng trong cả bảng bố cục tự động và cố định có thể được xử lý như thể auto được chỉ định.
• Được phép lồng các hàm min() và max() khác làm giá trị biểu thức. Các biểu thức là biểu thức toán học đầy đủ, vì vậy bạn có thể dùng phép cộng, trừ, nhân và chia trực tiếp mà không cần dùng chính hàm calc().
• Biểu thức có thể là các giá trị kết hợp các toán tử cộng ( + ), trừ ( - ), nhân ( * ) và chia ( / ), sử dụng các quy tắc ưu tiên toán tử tiêu chuẩn. Đảm bảo đặt khoảng trắng ở mỗi bên của các toán hạng + và -. Các toán hạng trong biểu thức có thể là bất kỳ giá trị cú pháp <length> nào.
• Bạn có thể (và thường cần phải) kết hợp các giá trị min() và max(), hoặc dùng max() trong hàm clamp() hoặc calc().

Cú pháp hình thức

<max()> = 
  max( <calc-sum># )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Khả năng truy cập

Khi max() được dùng để kiểm soát kích thước văn bản, hãy đảm bảo văn bản luôn đủ lớn để đọc. Gợi ý là dùng hàm min() lồng trong max() có giá trị thứ hai là đơn vị độ dài tương đối luôn đủ lớn để đọc. Ví dụ:

small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}

Điều này đảm bảo kích thước tối thiểu là 1rem, với kích thước văn bản thu phóng nếu trang được phóng to.

• MDN Hiểu WCAG, Hướng dẫn 1.4
• Hiểu Tiêu chí Thành công 1.4.4 | W3C Hiểu WCAG 2.0

Ví dụ

Đặt kích thước tối thiểu cho phông chữ

Một trường hợp sử dụng khác của max() là cho phép kích thước phông chữ tăng lên trong khi đảm bảo nó ít nhất ở kích thước tối thiểu, cho phép kích thước phông chữ đáp ứng trong khi vẫn đảm bảo khả năng đọc.

Hãy xem một số CSS:

h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}

Kích thước phông chữ sẽ ít nhất là 2rem, hoặc gấp đôi kích thước mặc định của phông chữ cho trang. Điều này đảm bảo rằng nó có thể đọc được và dễ tiếp cận.

<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">
  This text is always legible, and is responsive, to a point
</h1>

Hãy nghĩ về hàm max() như việc tìm giá trị tối thiểu được phép cho một thuộc tính.

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• calc()
• clamp()
• min()
• Học: Giá trị và đơn vị