Trong CSS có những đơn vị tính nào?
Theo những tìm hiểu của mình và trong quá trình làm việc thực tế ở các dự
án thì có các đơn vị tính trong CSS: px, pt, in, pc, mm, cm, em, ex, ch, rem, vw, vh, vmin, vmax, %...
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é 😎
 |
| các đơn vị trong css |
Let’s get started !
Đơ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.
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>
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 😂
