Làm chủ thiết kế web đáp ứng với các chức năng toán học CSS

Toán học rất hay, môn toán rất hay, nhưng bạn có muốn dành thời gian thực hiện các phép tính khi bảng định kiểu của bạn có thể làm điều đó cho bạn không?

CSS đi kèm với ba hàm toán học tiện dụng sẽ thay đổi cách bạn thiết kế trang web của mình. Chúng tôi sẽ chỉ cho bạn cách thức và lý do tại sao bạn nên sử dụng chúng.

Giới thiệu Toán học với CSS

CSS chủ yếu là khai báo, nhưng các bản sửa đổi đã giới thiệu các chức năng cho ngôn ngữ. Hiện tại có nhiều hàm trong thông số kỹ thuật và ba trong số những hàm toán học đơn giản nhất có thể tỏ ra rất hữu ích: calc, max và min.

Bạn có thể sử dụng ví dụ CodePen đơn giản này để giúp làm theo hướng dẫn.

Hàm toán học CSS calc ()

Hàm calc () CSS thực hiện một phép tính đơn giản và sử dụng kết quả làm giá trị thuộc tính. Điều này có nghĩa là bạn có thể gán các giá trị động cho các thuộc tính như chiều cao và chiều rộng, tất cả đều không có truy vấn CSS @media.

Hàm này hỗ trợ phép cộng (+), phép nhân

phép trừ (-) và phép chia (/) với một toán tử duy nhất.

Ví dụ: Tạo khoảng cách đồng đều trên các kích thước màn hình

biểu đồ hiển thị các khoảng trống có kích thước khác nhau trong một trang web

LÀM VIDEO TRONG NGÀY

width: calc(100vw - 400px);

Nếu chúng ta sử dụng calc () thay thế, chúng ta có thể đặt khoảng cách giống nhau trên bất kỳ kích thước màn hình nào. Thuộc tính chúng tôi sử dụng cho việc này trông như thế này:

sơ đồ hiển thị css calc tạo ra các khoảng trống có cùng kích thước

Hàm toán học CSS max ()

Hàm CSS max () chọn giá trị cao nhất từ ​​một nhóm để thêm giá trị vào thuộc tính CSS. Bạn có thể thêm bao nhiêu giá trị tiềm năng tùy thích, với mỗi giá trị được phân tách bằng dấu phẩy, nhưng nó sẽ chỉ sử dụng giá trị cao nhất.

Ví dụ: Hạn chế chiều cao thanh điều hướng

biểu đồ hiển thị độ dày thanh điều hướng trên các thiết bị khác nhau

Điều này có thể làm cho giá trị thuộc tính trông tuyệt vời trên máy tính để bàn và xấu trên thiết bị di động, giống như hình ảnh ở trên cho thấy. Thanh điều hướng của chúng tôi có chiều cao đặt là 10vh, nhưng điều này làm cho thanh này trông mỏng trên các thiết bị máy tính để bàn.

height: max(10vh, 80px);

Chúng ta có thể sử dụng hàm CSS max () để giải quyết vấn đề này:

biểu đồ hiển thị các thanh điều hướng ở độ cao bằng nhau

Hàm toán học CSS min ()

Hàm min () giống như hàm max (), nhưng nó chọn giá trị thấp nhất từ ​​một nhóm để sử dụng làm giá trị thuộc tính.

Ví dụ: Đặt Kích thước Văn bản Tối đa

biểu đồ hiển thị văn bản quá lớn trên thiết bị di động Sử dụng một kích thước phông chữ: 10vh;

thuộc tính trên văn bản tiêu đề chính trong ví dụ của chúng tôi làm cho văn bản trông tuyệt vời trên máy tính để bàn, nhưng quá lớn trên thiết bị di động.

font-size: min(10vh, 10vw);

Để thay đổi điều này, bạn có thể sử dụng hàm CSS min () để cung cấp kích thước thay thế:

sơ đồ hiển thị văn bản có kích thước phù hợp

Sử dụng Toán học cho Thiết kế Web Đáp ứng

Các hàm toán học được đóng gói sẵn với CSS cung cấp một cách độc đáo để tạo ra các trang web đáp ứng một cách dễ dàng. Bạn chỉ cần thiết lập chúng một cách chính xác để bắt đầu.

Cách tạo thanh điều hướng đáp ứng bằng HTML và CSS

Đọc tiếp