CSS units – Cách sử dụng units trong CSS chi tiết

CSS unit (đơn vị đo lường CSS) được sử dụng để xác định kích thước của thuộc tính mà chúng ta thiết lập cho một phần tử hoặc nội dung của nó. Có nhiều loại đơn vị trong CSS để biểu thị đo lường và chiều dài. Những đơn vị này được sử dụng để thiết lập margin, padding, chiều dài và các thuộc tính khác. Chúng ta không thể áp dụng khoảng trắng giữa số và đơn vị. Đối với giá trị 0, đơn vị có thể bị bỏ qua. Một số thuộc tính của CSS cho phép giá trị âm của chiều dài.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS units là gì?

Có hai loại đơn vị chiều dài trong CSS: độ dài tuyệt đối và độ dài tương đối. Độ dài tuyệt đối là các đơn vị chiều dài cố định, và chiều dài được biểu thị bằng đơn vị tuyệt đối sẽ xuất hiện cùng kích thước đó. Thường không được khuyến khích sử dụng khi hiển thị trên màn hình, vì kích thước màn hình thay đổi quá nhiều. Do đó, các đơn vị tuyệt đối nên được sử dụng khi phương tiện xuất ra đã biết, như bố cục in. Đơn vị tuyệt đối hữu ích khi không xem xét tính đáp ứng trong một dự án. Chúng không được ưa chuộng cho các trang web có tính đáp ứng, vì chúng không tự động co giãn khi màn hình thay đổi. Thông thường, độ dài tuyệt đối được coi là có kích thước giống nhau.

Độ dài tuyệt đối được liệt kê như sau:

Tên đơn vị	Giải thích
cm	Được sử dụng để xác định kích thước theo đơn vị centimet.
mm	Được sử dụng để xác định kích thước theo đơn vị milimet.
in	Được sử dụng để xác định kích thước theo đơn vị inch. 1in = 96px = 2.54cm.
pt	Được sử dụng để xác định kích thước theo đơn vị điểm. 1pt = 1/72 inch.
pc	Được sử dụng để xác định kích thước theo đơn vị picas. 1pc = 12pt, vì vậy 6 picas tương đương với 1 inch.
px	Được sử dụng để xác định kích thước theo đơn vị pixel. 1px = 1/96 inch.

Ví dụ:

p {
  font-size: 20px;
  margin-left: 2.54cm; /* 1 inch */
}

Độ dài tương đối là các đơn vị chiều dài linh hoạt, chúng được tỷ lệ với kích thước của cửa sổ hoặc phần tử cha. Chúng chỉ định chiều dài tương đối với thuộc tính chiều dài khác. Tùy thuộc vào thiết bị, nếu kích thước màn hình thay đổi quá nhiều, thì các đơn vị chiều dài tương đối là tốt nhất vì chúng tỷ lệ tốt hơn giữa các phương tiện hiển thị khác nhau. Chúng ta có thể sử dụng đơn vị tương đối như mặc định cho các trang web đáp ứng. Điều này giúp chúng ta tránh cập nhật các kiểu cho các kích thước màn hình khác nhau.

Độ dài tương đối được liệt kê như sau:

Tên đơn vị	Giải thích
em	Tỉ lệ với kích thước phông chữ của phần tử.
ex	Tỉ lệ với chiều cao của chữ x viết thường trong phông chữ của phần tử. Chiều cao x được tính bằng chiều cao của chữ thường.
ch	Tương tự như đơn vị ex, nhưng thay vì sử dụng chiều cao của chữ x, nó đo chiều rộng của số 0.
rem	Là kích thước phông chữ của phần tử gốc (root element).
vh	Tỉ lệ với chiều cao của viewport. 1vh = 1% hoặc 1/100 chiều cao của viewport.
vw	Tỉ lệ với chiều rộng của viewport. 1vw = 1% hoặc 1/100 chiều rộng của viewport.
vmin	Tỉ lệ với kích thước nhỏ hơn của viewport. 1vmin = 1% hoặc 1/100 kích thước nhỏ hơn của viewport.
vmax	Tỉ lệ với kích thước lớn hơn của viewport. 1vmax = 1% hoặc 1/100 kích thước lớn hơn của viewport.

|%|Được sử dụng để xác định kích thước theo phần trăm so với giá trị khác.

Ví dụ:

.container {
  width: 50%;
  margin: 2rem auto;
}

h1 {
  font-size: 3em;
}

p {
  font-size: 1.2rem;
}

Cách sử dụng CSS units

Để sử dụng CSS units, bạn cần chỉ định đơn vị sau giá trị của thuộc tính CSS. Ví dụ, để đặt chiều rộng của một phần tử thành 100px, bạn sẽ sử dụng mã sau:

width: 100px;

Để đặt chiều rộng của một phần tử thành một nửa chiều rộng của phần tử cha, bạn sẽ sử dụng mã sau:

width: 50%;

Ưu và Nhược điểm CSS units

Đơn vị tuyệt đối có ưu điểm là cố định và chính xác, tuy nhiên, chúng không phù hợp cho các trang web đáp ứng. Trong khi đó, đơn vị tương đối linh hoạt và có thể tỷ lệ với kích thước màn hình, nhưng chúng có thể không chính xác và khó kiểm soát trong một số trường hợp.

Lời khuyên CSS units

• Sử dụng đơn vị tương đối để thiết kế các trang web đáp ứng.
• Sử dụng đơn vị tuyệt đối cho các phương tiện in.
• Không sử dụng đơn vị tương đối quá nhiều, vì chúng có thể dẫn đến việc không kiểm soát được kích thước của phần tử.

Ngoài ra, khi sử dụng các đơn vị trong CSS, chúng ta cần lưu ý rằng các trình duyệt hiển thị các đơn vị khác nhau một chút và đôi khi các đơn vị không hoạt động như mong đợi do sự sai lệch giữa trình duyệt và các phương tiện hiển thị. Do đó, chúng ta cần kiểm tra kỹ càng và thử nghiệm để đảm bảo rằng các thuộc tính CSS của chúng ta hoạt động như mong đợi.

Như vậy, CSS Units là một phần rất quan trọng trong thiết kế web và chúng ta cần hiểu rõ về chúng để có thể tạo ra các trang web tốt hơn và đáp ứng tốt hơn cho người dùng.