Giải thích về đơn vị CSS

CSS có một số tùy chọn để sử dụng các đơn vị khi xác định kích thước của các thuộc tính CSS khác nhau. Tìm hiểu tất cả các tùy chọn của bạn cho các đơn vị CSS có thể là key để tạo kiểu theo cách dễ quản lý và trông tuyệt vời trên mọi màn hình.

Đơn vị CSS là gì?

Đơn vị CSS xác định kích thước của thuộc tính mà bạn đang đặt cho một phần tử hoặc nội dung của nó. Ví dụ: nếu bạn muốn đặt margin thuộc tính của một đoạn văn, bạn sẽ cung cấp cho nó một giá trị cụ thể. Giá trị này bao gồm đơn vị CSS.

Hãy xem một ví dụ nhỏ:

p {   margin: 20px; }

Trong trường hợp này, margin là tài sản, 20px; là giá trị và px (hoặc “pixel”) là đơn vị CSS.

Mặc dù người ta thường thấy các đơn vị như px được sử dụng, câu hỏi lớn thường là, "Đơn vị tốt nhất để sử dụng ở đây là gì?"

Dưới đây là một số cân nhắc cần thực hiện khi chọn một loại đơn vị và các trường hợp sử dụng mẫu:

Đơn vị tuyệt đối so với đơn vị tương đối

Khi xem xét tất cả các tùy chọn để sử dụng đơn vị nào, điều quan trọng là phải xem xét hai loại đơn vị: tuyệt đối và tương đối.

Đơn vị tuyệt đối

Các đơn vị "tuyệt đối" có cùng kích thước dù kích thước cửa sổ hoặc phần tử chính. Điều này nghĩa là một tập hợp thuộc tính có giá trị có đơn vị tuyệt đối sẽ có kích thước đó khi được xem trên điện thoại hoặc trên màn hình lớn (và mọi thứ ở giữa!)

Các đơn vị tuyệt đối có thể hữu ích khi làm việc trên một dự án mà khả năng đáp ứng không được xem xét. Ví dụ: các ứng dụng dành cho máy tính để bàn không thể thay đổi kích thước có thể được tạo kiểu cho kích thước mặc định. Nếu cửa sổ không mở rộng, bạn cũng không cần nội dung.

Gợi ý: Các đơn vị tuyệt đối có thể kém thuận lợi hơn cho các trang web đáp ứng vì chúng không mở rộng khi kích thước màn hình thay đổi.

Đơn vị tuyệt đối	Sự miêu tả	Thí dụ
px	1/96 của 1 inch (96px = 1 inch)	font-size: 12px;
pt	1/72 của 1 inch (72pt = 1 inch)	kích thước phông chữ: 12pt;
máy tính	12pt = 1pc	kích thước phông chữ: 1.2pc;
cm	centimet	cỡ chữ: 0,6cm;
mm	milimét (10 mm = 1 cm)	cỡ chữ: 4mm;
trong	inch	kích thước phông chữ: 0,2in;

Điểm ảnh ( px ) thường là đơn vị tuyệt đối phổ biến nhất cho màn hình. Centimet, milimet và inch phổ biến hơn đối với in ấn và bạn có thể thậm chí không biết chúng là các tùy chọn!

Đơn vị tương đối

Các đơn vị tương đối hữu ích để tạo kiểu cho các trang web đáp ứng vì chúng chia tỷ lệ tương ứng với kích thước cửa sổ hoặc kích thước chính (tùy thuộc vào đơn vị).

Theo luật chung, đơn vị tương đối được dùng làm mặc định cho các trang web đáp ứng. Điều này có thể giúp bạn tránh phải cập nhật kiểu cho các kích thước màn hình khác nhau.

Các đơn vị tương đối có thể khó hơn một chút so với các đơn vị tuyệt đối trong việc xác định sử dụng đơn vị nào, vì vậy ta hãy xem xét các tùy chọn của bạn một cách chi tiết.

Đơn vị tương đối	Sự miêu tả
%	Liên quan đến giá trị của phần tử mẹ cho thuộc tính đó
em	Liên quan đến kích thước phông chữ hiện tại của phần tử
rem	Liên quan đến kích thước phông chữ của root (ví dụ: phần tử `<html>` ). “Rem” = “root em”
ch	Số ký tự (1 ký tự bằng chiều rộng của 0/0 phông chữ hiện tại)
vh	Tương đối với chiều cao của khung nhìn (kích thước cửa sổ hoặc ứng dụng). 1vh = 1/100 chiều cao của khung nhìn
vw	Tương đối với chiều rộng của khung nhìn. 1vw = 1/100 chiều rộng của khung nhìn.
vmin	Tương đối với kích thước nhỏ hơn của khung nhìn (ví dụ: đối với hướng dọc, chiều rộng nhỏ hơn chiều cao nên nó tương đối với chiều rộng). 1vmin = 1/100 kích thước nhỏ hơn của khung nhìn.
vmax	Tương đối với kích thước lớn hơn của khung nhìn (ví dụ: chiều cao cho hướng dọc).1vmax = 1/100 kích thước lớn hơn của khung nhìn.
Ví dụ	Tương đối với chiều cao của chữ viết thường “x” của phông chữ hiện tại.

Không phải lúc nào cũng rõ ràng tùy chọn nào trong số này là tốt nhất để sử dụng cho từng loại thuộc tính CSS. Ví dụ: % thường thích hợp hơn cho các thuộc tính liên quan đến bố cục như width hơn là cho font-size .

Dưới đây là một số ví dụ về thời điểm bạn sử dụng mỗi đơn vị tương đối.

% : Bạn muốn một phần tử con có 10% chiều rộng của phần tử cha làm lề để nó không bao giờ lấp đầy toàn bộ phần tử cha. Nếu kích thước của cha mẹ thay đổi, lề cũng sẽ cập nhật.
```
.child {   margin: 10%; } 
```
em : Bạn muốn phông chữ của một phần tử con có kích thước bằng một nửa kích thước phông chữ root của nó (ví dụ: đoạn văn dưới tiêu đề của phần).
```
.child {   font-size: 0.5em; } 
```
rem : Kích thước phông chữ phải gấp đôi kích thước phông chữ của phần tử root . Đây có thể là cách bạn định kích thước tiêu đề của bạn vì tất cả chúng phải có cùng kích thước dù containers chính.
```
.header {   font-size: 2rem; } 
```
ch : Bạn có phông chữ có khoảng cách đơn (các ký tự luôn có cùng chiều rộng) và bạn chỉ có khoảng trống cho 10 ký tự.
```
.small-text {   width: 10ch; } 
```
vh : Trang đích của bạn phải luôn có chiều cao của khung nhìn / cửa sổ.
```
.wrapper {   height: 100vh; } 
```
vw : Bạn có một phần có văn bản phải rộng bằng một nửa khung nhìn / cửa sổ.
```
.half-size {   width: 50vw; } 
```
vmin : Bạn có một hình ảnh phải luôn rộng bằng kích thước nhỏ hơn của khung nhìn. Trên điện thoại được giữ ở chế độ dọc, hình ảnh sẽ rộng bằng chiều rộng của khung nhìn.
```
.min-width {   width: 100vmin; } 
```
vmax : Bạn không quan tâm đến việc hình ảnh có bị cắt bỏ hay không vì bạn muốn nó lấp đầy hoàn toàn kích thước lớn hơn của khung nhìn. Ví dụ: nếu hình ảnh của một mẫu được sử dụng làm nền.
```
.max-width {   width: 100vmax; } 
```
ví dụ : Bạn có thể sẽ không bắt gặp ex thường xuyên nhưng nói chung đó là một thước đo tốt cho phần giữa của phông chữ. Giả sử bạn muốn line-height của phông chữ gấp đôi chiều cao của chữ “x” của phông chữ.
```
.double-x {   line-height: 2ex; } 
```

Nhìn chung, khi nào và cách bạn chọn các đơn vị CSS của bạn sẽ có một vài câu hỏi sau:

Tôi có muốn những gì tôi đang tạo kiểu mở rộng khi kích thước khung nhìn thay đổi không?
Nếu tôi muốn nó mở rộng quy mô, tôi muốn nó mở rộng quy mô so với trong ứng dụng là gì?

Khi bạn đã trả lời những câu hỏi này, sẽ dễ dàng hơn rất nhiều để xác định đơn vị sẽ sử dụng. 💪

Đọc thêm

Bạn có thể tìm hiểu sâu hơn về đơn vị khung nhìn bằng cách đọc bài viết này , hoặc xem bài viết này về đơn vị em và rem nếu sự khác biệt giữa hai đơn vị đó vẫn chưa rõ ràng.

Tags:

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03