Hướng dẫn image clamp css - kẹp hình ảnh css

Question

Hàm clamp() 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.clamp() 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.

Nội dung chính Show

Thông số
Giá trị trả về
Cú pháp chính thức
So sánh Min, Max và Kẹp
Thông số kỹ thuật
Tính tương thích của trình duyệt web

Thử nó

Lưu ý rằng sử dụng clamp() cho kích thước phông chữ, như trong các ví dụ này, cho phép bạn đặ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 clamp(min, val, max) 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ó.

min

Giá 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.

________số 8

Giá 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.

max

Giá 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

<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 để 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ư

<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) hoặc các hàm

<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 và

<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. Đố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à phân chia mà không sử dụng chức năng ____1010. 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ể

<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

5 đã được chỉ định.

Nó được phép làm 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

3 và

<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 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 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 (

<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), phép trừ (

<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

9), các toán tử nhâ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>

0) và phân chia (

<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), 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

<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 và

<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

9. Các toán hạng trong biểu thức có thể là bất kỳ giá trị cú pháp

<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 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

<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 và

<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 trong hàm clamp().

Giá trị trả về

<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>

8 được giải quyết là ____ 9 (tối thiểu, ________ 7 (val, max)).max(MIN, min(VAL, MAX)).

Dựa trên các tham số được cung cấp, hàm trả về

<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,

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);
}

2,

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,

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);
}

4,

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,

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);
}

6 hoặc

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.

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

Ví dụ

So sánh Min, Max và Kẹp

Trong ví dụ này, chúng tôi có một ví dụ đáp ứng đơn giản sử dụng

<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 và clamp() cho một số kích thước.

Phần tử clamp()1 của clamp()2 được đặt là clamp()3. Điều này có nghĩa là chiều rộng sẽ được đặt ở clamp()4, trừ khi kết quả của clamp()5 nhỏ hơn clamp()4, trong trường hợp đó nó sẽ được đặt thành giá trị đó thay thế.

<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 cho phép bạn đặt giá trị tối đa.

Phần tử clamp()8 của clamp()9 được đặt là clamp()0. Điều này có nghĩa là clamp()9 sẽ được đặt ở clamp()2, trừ khi giá trị tính toán của clamp()3 lớn hơn clamp()2, trong trường hợp đó sẽ được đặt thành giá trị đó thay thế.

<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 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ử clamp()6 của clamp()9 được đặt là clamp()8. Điều này có nghĩa là clamp()9 sẽ được đặt ở clamp(min, val, max)0, cho đến khi giá trị tính toán của clamp(min, val, max)1 trở nên lớn hơn so với clamp(min, val, max)0. Tại thời điểm này, clamp()9 sẽ được đặt tại clamp(min, val, max)1, cho đến khi giá trị tính toán của ____ 61 trở nên lớn hơn so với clamp(min, val, max)6. Tại thời điểm này, clamp()9 sẽ được đặt tại clamp(min, val, max)6. clamp() 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>

CSS

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);
}