Bài viết được sự cho phép của tác giả Lưu Bình An Diễn giảiLưu ý: hàm clamp không chạy trên IE
clamp(MIN, PREFER, MAX);
Trong đó: - MIN: là giá trị chặn dưới, nếu giá trị PREFER < MIN => return giá trị MIN: là giá trị chặn dưới, nếu giá trị PREFER < MIN => return giá trị MIN
- PREFER: là giá trị sẽ được return nếu đang nằm trong khoản giữa MIN và MAX: là giá trị sẽ được return nếu đang nằm trong khoản giữa MIN và MAX
- MAX: là giá trị chặn trên, nếu giá trị PREFER > MAX => return giá trị MAX: là giá trị chặn trên, nếu giá trị PREFER > MAX => return giá trị MAX
Sử dụng cho giá trị font-size
body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
Diễn giải đoạn code chỉnh font-size không thể rắc rối hơn ở trên: “tính dùm tôi cái font size cho nó tự động to nhỏ theo màn hình, với công thức tính là 1% của viewport + 1.1rem, kết quả không được phép nhỏ hơn 1.1rem và lớn hơn 2.5rem” Kết quả nhận được Chúng ta vừa cho phép giá trị font-size linh động theo kích thước màn hình, nhưng vẫn đảm bảo nó không được quá lớn và quá nhỏ với hai giá trị chặn trên, chặn dưới. Sử dụng với thuộc tính width Nếu bạn có đam mê với typography thì thể đọc hết cuốn The element of typographic style. Ở đây mình xin trích một đoạn trong cuốn sách này: từ 45 đến 75 ký tự trên một cột là chuẩn không cần chỉnh. Áp dụng lý thuyết này ta có thể viết div {
width: clamp(45ch, 50%, 75ch);
}
body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
0 là đơn vị tính độ rộng của một ký tự
Có thể bạn quan tâm: - Giải thích React Component Lifecycle
- Giải thích Javascript Reactivity
- Một ví dụ đơn giản giải thích hàm đệ quy
Hàm body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
1 CSS kẹp một giá trị giữa trong một phạm vi các giá trị giữa giới hạn tối thiểu được xác định và giới hạn tối đa. Hàm có ba tham số: giá trị tối thiểu, giá trị ưu tiên và giá trị được phép tối đa.body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
1 CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.
Thử nóLưu ý rằng sử dụng body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
1 cho kích thước phông chữ, như trong các ví dụ này, cho phép bạn đặt một kích thước phông chữ phát triển với kích thước của chế độ xem, nhưng không nằm dưới kích thước phông chữ tối thiểu hoặc trên kích thước phông chữ tối đa. Nó có tác dụng tương tự như mã trong kiểu chữ chất lỏng nhưng trong một dòng và không sử dụng các truy vấn truyền thông.Cú pháp/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);
/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
Thông sốHàm body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
3 chấp nhận ba biểu thức được phân tách bằng dấu phẩy là các tham số của nó. body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
4Giá trị tối thiểu là giá trị nhỏ nhất (âm nhất). Đây là giới hạn dưới trong phạm vi của các giá trị được phép. Nếu giá trị ưu tiên nhỏ hơn giá trị này, giá trị tối thiểu sẽ được sử dụng. body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
5Giá trị ưa thích là biểu thức có giá trị sẽ được sử dụng miễn là kết quả là giữa các giá trị tối thiểu và tối đa. body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
6Giá trị tối đa là giá trị biểu thức lớn nhất (tích cực nhất) mà giá trị của thuộc tính sẽ được gán nếu giá trị ưu tiên lớn hơn giới hạn trên này. Các biểu thức có thể là các hàm toán học (xem body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
7 để biết thêm thông tin), các giá trị theo nghĩa đen, các biểu thức khác đánh giá theo loại đối số hợp lệ (như body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
8) hoặc các hàm body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
9 và div {
width: clamp(45ch, 50%, 75ch);
}
0. Đối với các biểu thức toán học, bạn có thể sử dụng bổ sung, trừ, nhân và chia mà không sử dụng chức năng body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
7. Bạn cũng có thể sử dụng dấu ngoặc đơn để thiết lập thứ tự tính toán khi cần thiết.Bạn có thể sử dụng các đơn vị khác nhau cho mỗi giá trị trong các biểu thức và các đơn vị khác nhau trong bất kỳ hàm toán học nào tạo nên bất kỳ đối số nào. Hãy ghi nhớ các khía cạnh sau trong khi làm việc với chức năng: - Biểu thức toán học liên quan đến tỷ lệ 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ả hai bảng tự động và bố cục cố định có thể được xử lý như thể
div {
width: clamp(45ch, 50%, 75ch);
}
2 đã được chỉ định. - Nó được phép làm tổ
div {
width: clamp(45ch, 50%, 75ch);
}
0 và body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
9 có chức năng như các giá trị biểu thức, trong trường hợp đó, các giá trị bên trong được coi là dấu ngoặc đơn đơn giản. Các biểu thức là các biểu thức toán học đầy đủ, vì vậy bạn có thể sử dụng bổ sung trực tiếp, trừ, phép nhân và phân chia mà không cần sử dụng chức năng calc (). - Biểu thức có thể là các giá trị kết hợp việc bổ sung (
div {
width: clamp(45ch, 50%, 75ch);
}
5), phép trừ (div {
width: clamp(45ch, 50%, 75ch);
}
6), các toán tử nhân (div {
width: clamp(45ch, 50%, 75ch);
}
7) và phân chia (div {
width: clamp(45ch, 50%, 75ch);
}
8), sử dụng các quy tắc ưu tiên toán tử tiêu chuẩn. Đảm bảo đặt một khoảng trống ở mỗi bên của các toán hạng div {
width: clamp(45ch, 50%, 75ch);
}
5 và div {
width: clamp(45ch, 50%, 75ch);
}
6. Các toán hạng trong biểu thức có thể là bất kỳ giá trị cú pháp body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
8 nào. Bạn có thể sử dụng các đơn vị khác nhau cho mỗi giá trị trong biểu thức của bạn. Bạn cũng có thể sử dụng dấu ngoặc đơn để thiết lập thứ tự tính toán khi cần thiết. - Thông thường, bạn sẽ muốn sử dụng
body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
9 và div {
width: clamp(45ch, 50%, 75ch);
}
0 trong hàm body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
1.
Giá trị trả lại/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);
/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
5 được giải quyết là ________ 16 (tối thiểu, ________ 14 (Val, Max)).body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
6(MIN, body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
4(VAL, MAX))Dựa trên các tham số được cung cấp, hàm trả về body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
8, /* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);
/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
9, <clamp()> =
clamp( <calc-sum>#{3} ) <calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]* <calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]* <calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> ) <calc-constant> =
e |
pi |
infinity |
-infinity |
NaN 0, <clamp()> =
clamp( <calc-sum>#{3} ) <calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]* <calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]* <calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> ) <calc-constant> =
e |
pi |
infinity |
-infinity |
NaN 1, <clamp()> =
clamp( <calc-sum>#{3} ) <calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]* <calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]* <calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> ) <calc-constant> =
e |
pi |
infinity |
-infinity |
NaN 2, <clamp()> =
clamp( <calc-sum>#{3} ) <calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]* <calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]* <calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> ) <calc-constant> =
e |
pi |
infinity |
-infinity |
NaN 3 hoặc <clamp()> =
clamp( <calc-sum>#{3} ) <calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]* <calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]* <calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> ) <calc-constant> =
e |
pi |
infinity |
-infinity |
NaN 4.Cú pháp chính thức<clamp()> =
clamp( <calc-sum>#{3} ) <calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]* <calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]* <calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> ) <calc-constant> =
e |
pi |
infinity |
-infinity |
NaN So sánh Min, Max và KẹpTrong ví dụ này, chúng tôi có một ví dụ đáp ứng đơn giản sử dụng body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
9, div {
width: clamp(45ch, 50%, 75ch);
}
0 và body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
1 cho một số kích thước.Phần tử <clamp()> =
clamp( <calc-sum>#{3} ) <calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]* <calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]* <calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-constant> |
( <calc-sum> ) <calc-constant> =
e |
pi |
infinity |
-infinity |
NaN 8 của width được đặt là <h2>Simple responsive test</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>
<p>
Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
0. Điều này có nghĩa là chiều rộng sẽ được đặt ở <h2>Simple responsive test</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>
<p>
Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
1, trừ khi kết quả của <h2>Simple responsive test</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>
<p>
Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
2 nhỏ hơn <h2>Simple responsive test</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>
<p>
Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
1, trong trường hợp đó nó sẽ được đặt thành giá trị đó thay thế. body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
9 cho phép bạn đặt giá trị tối đa.Phần tử <h2>Simple responsive test</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>
<p>
Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
5 của font-size được đặt là <h2>Simple responsive test</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>
<p>
Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
7. Điều này có nghĩa là font-size sẽ được đặt ở <h2>Simple responsive test</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>
<p>
Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
9, trừ khi giá trị được tính toán của html {
font-family: sans-serif;
}
body {
margin: 0 auto;
width: min(1000px, calc(70% + 100px));
}
h2 {
letter-spacing: 2px;
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
p {
line-height: 1.5;
font-size: max(1.2rem, 1.2vw);
}
0 lớn hơn <h2>Simple responsive test</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>
<p>
Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
9, trong trường hợp đó sẽ được đặt thành giá trị đó thay thế. div {
width: clamp(45ch, 50%, 75ch);
}
0 cho phép bạn đặt giá trị tối thiểu, trong những trường hợp như thế này rất hữu ích cho mục đích tiếp cận.Phần tử html {
font-family: sans-serif;
}
body {
margin: 0 auto;
width: min(1000px, calc(70% + 100px));
}
h2 {
letter-spacing: 2px;
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
p {
line-height: 1.5;
font-size: max(1.2rem, 1.2vw);
}
3 của font-size được đặt là html {
font-family: sans-serif;
}
body {
margin: 0 auto;
width: min(1000px, calc(70% + 100px));
}
h2 {
letter-spacing: 2px;
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
p {
line-height: 1.5;
font-size: max(1.2rem, 1.2vw);
}
5. Điều này có nghĩa là font-size sẽ được đặt ở html {
font-family: sans-serif;
}
body {
margin: 0 auto;
width: min(1000px, calc(70% + 100px));
}
h2 {
letter-spacing: 2px;
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
p {
line-height: 1.5;
font-size: max(1.2rem, 1.2vw);
}
7, cho đến khi giá trị tính toán của html {
font-family: sans-serif;
}
body {
margin: 0 auto;
width: min(1000px, calc(70% + 100px));
}
h2 {
letter-spacing: 2px;
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
p {
line-height: 1.5;
font-size: max(1.2rem, 1.2vw);
}
8 trở nên lớn hơn so với html {
font-family: sans-serif;
}
body {
margin: 0 auto;
width: min(1000px, calc(70% + 100px));
}
h2 {
letter-spacing: 2px;
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
p {
line-height: 1.5;
font-size: max(1.2rem, 1.2vw);
}
7. Tại thời điểm này, font-size sẽ được đặt tại html {
font-family: sans-serif;
}
body {
margin: 0 auto;
width: min(1000px, calc(70% + 100px));
}
h2 {
letter-spacing: 2px;
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
p {
line-height: 1.5;
font-size: max(1.2rem, 1.2vw);
}
8, cho đến khi giá trị tính toán của ____ 68 trở nên lớn hơn so với font-size3. Tại thời điểm này, font-size sẽ được đặt tại font-size3. body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
1 cho phép bạn đặt giá trị tối thiểu và tối đa.Bạn tìm thấy ví dụ này trực tiếp trên GitHub, nếu bạn muốn chơi xung quanh với nó. HTML<h2>Simple responsive test</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>
<p>
Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>
CSShtml {
font-family: sans-serif;
}
body {
margin: 0 auto;
width: min(1000px, calc(70% + 100px));
}
h2 {
letter-spacing: 2px;
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
p {
line-height: 1.5;
font-size: max(1.2rem, 1.2vw);
}
Thông số kỹ thuật
| Sự chỉ rõ |
|---|
Các giá trị CSS và đơn vị Mô-đun cấp 4 # Tổ chức calc
# calc-notation
|
Tính tương thích của trình duyệt webBảng BCD chỉ tải trong trình duyệt |
