Tất tần tật các đơn vị trong CSS

Chắc hẳn trong quá trình viết css cho một trang web có responsive, không ít bạn đã rất đau đầu trong việc chọn đơn vị sao cho hợp lý để code responsive càng ít càng tốt.

Bài viết này, hãy cùng mình tìm hiểu tất tần tật về các đơn vị trong CSS để giải quyết vấn đề khó nhằn ở trên nhé 😎

Let’s get started !

Tất tần tật các đơn vị trong CSS

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

Trước khi tìm hiểu về từng loại đơn vị trong CSS, hãy cùng mình tìm hiểu qua về cách phân loại các đơn vị này nhé.

Đơn vị tương đối (Relative Units) là những đơn vị được tính một cách tương đối dựa trên các phần tử khác (có thể là phần tử cha hoặc phần tử root). Các đơn vị loại này khá linh động, rất thích hợp cho việc thích ứng trên các thiết bị khác nhau. Một vài đơn vị tương đối như: rem, em, %, vw, vh, ex, ch, vmin, vmax

Đơn vị tuyệt đối (Absolute Units) là những đơn vị mà giá trị của nó không bao giờ thay đổi và không bị ảnh hưởng bởi các thành phần khác. Tức là trong mọi kích thước màn hình thì kích thước của nó vẫn như thế. Với loại đơn vị này chỉ nên dùng cho những thứ có kich thước cố định, hoặc kích thước nhỏ không quá ảnh hưởng như border, … Một vài đơn vị tuyệt đối như: px, pt, cm, mm, pc, in.

Đơn vị rem và em

em là đơn vị mà giá trị của nó được tính dựa trên tỉ lệ so với phần tử cha của nó hoặc chính nó thông qua giá trị của thuộc tính font-size.

Mức độ ưu tiên sẽ tính theo font-size của nó trước, nếu nó không set thuộc font-size thì lấy của cha trực tiếp. Nếu cha nó không có thì lấy tiếp cha của cha nó 😂 Đến khi nào đến root thì thôi.

Đơn vị css rem và em

rem (root em) tương tự như em, nhưng đơn giản là nó sẽ tỉ lệ theo thuộc tính font-size của phần tử root <html>

html {
  font-size: 20px;
}

div {
  /* 2rem = 2 * 20px = 40px */
  font-size: 2rem;  
}

Tips: Đâu đó bạn sẽ thấy đoạn code này html { font-size: 62.5% }. Vậy nó có ý nghĩa gì?

Theo mặc định của trình duyệt, thẻ html có font-size là 16px = 100%. Vậy 62.5% = 10px, set như thế để dễ cho việc tính toán chia tỉ lệ theo rem dễ hơn rất nhiều đúng không nào. VD như 2.5rem = 25px 🤗

Đơn vị vw, vh, %

vw (view width) sẽ tính theo tỉ lệ chiều rộng khung nhìn thiết bị của bạn. 1 vw = 1/100 chiều rộng view-port. Ví dụ: màn hình của bạn có chiều rộng 1100px thì 1vw = 11px;

vh (view height) tương tự vw, vh sẽ tỉ lệ theo chiều cao của khung nhìn thiết bị.

% – đơn vị phần trăm sẽ tỉ lệ theo phần tử cha trực tiếp của nó.

Đơn vị vmin và vmax

2 đơn vị này tương tự như vw và vh. Điểm khác biệt là nó sẽ không tỉ lệ theo 1 hướng mà là cả 2, tuỳ thuộc vào độ lớn của chiều cao và chiều rộng màn hình. Cụ thể:

1 vmin = 1 vw hoặc 1 vh (Lấy cái nhỏ hơn). VD: màn hình của bạn có kích thước là 840×640 thì 1 vmin = 6.4px, nếu màn hình của bạn là 360×480 thì 1 vmin = 3.6px

1 vmax = 1 vw hoặc 1 vh (Lấy cái lớn hơn). VD: màn hình của bạn có kích thước là 840×640 thì 1 vmin = 8.4px, nếu màn hình của bạn là 360×480 thì 1 vmin = 4.8px

Đơn vị ex và ch

2 đơn vị này mình thấy khá ít sử dụng và nên bạn có thể đọc để tham khảo thôi nhé.

ch là đơn vị được tính theo chiều rộng của ký tự “0”. Với những font chữ là monospace thì các ký tự đều có cùng 1 chiều rộng.

ex theo định nghĩa thì nó liên quan đến chiều cao của ký tự “x” của font chữ hiện tại (rất ít khi sử dụng). Kệ nó đi 😂

Các đơn vị tuyệt đối px, pt, cm, in, mm

Với các đơn vị tuyệt đối thì giá trị của nó được cố định và không bị ảnh hưởng bởi bất kỳ thành phần nào khác.

Các đơn vị này chỉ nên sử dụng với những thành phần đã được xác định chính xác kích thước và không bị biến thiên bởi các thành phần khác. Hoặc các thuộc tính có kích thước nhỏ, không cần quá chính xác như border: solid 1px;

Thuộc tính hay được sử dụng nhất là px hoặc pt.

  • cm – centimeters
  • mm – millimeters
  • in – inches (1in = 96px = 2.54cm)
  • pt – points (1pt = 1/72 of 1in)
  • px – pixels (1px = 1/96th of 1in)
  • pc – picas (1pt = 1/72 of 1in)
don vi tuyet doi css
Nguồn: medium.com

Bảng tóm tắt các đơn vị trong CSS

Tên đơn vịGiải thích
emTỉ lệ với thuộc tính font-size của chính nó hoặc phần tử cha
remTỉ lệ với thuộc tính font-size của phần tử root (html)
vwTỉ lệ với kích thước chiều rộng khung nhìn. 1vw = 1% viewport width
vhTỉ lệ với kích thước chiều cao khung nhìn. 1vw = 1% viewport height
%Tỉ lệ phần trăm với phần tử cha
vmin1 vmin = 1 vw or 1 vh (Chọn cái nào nhỏ hơn)
vmax1 vmin = 1 vw or 1 vh (Chọn cái nào lớn hơn)
ch1 ch = chiều rộng của ký tự “0”
ex1 ex = chiều cao của ký tự x trong font chữ hiện tại
Đơn vị trong CSS – Đơn vị tương đối
Tên đơn vịGiải thích
pxpixels (1px = 1/96th of 1in)
ptpoints (1pt = 1/72 of 1in)
pcpicas (1pc = 12 pt)
mmmillimeters
cmcentimeters
ininches (1in = 96px = 2.54cm)
Đơn vị trong CSS – Đơn vị tuyệt đối

Tạm kết

Và trên đó là tất tần tật những gì mình biết về các đơn vị trong css. Tuỳ vào mỗi trường hợp cụ thể mà mọi người có cách sử dụng sao cho hợp lý nhất nhé. Nhưng mình khuyến khích mọi người cố gắng sử dụng đơn vị tương đối nhiều hơn để quá trình responsive trở nên đơn giản hơn.

Cảm ơn mọi người đã đọc bài viết này 😍

Tài liệu tham khảo:

Bạn có thể tham khảo thêm:

Give a Comment