Các Đơn Vị Tính Trong CSS

Chắc các bạn đã rất quen thuộc với những đơn vị tính như px, pt để đặt kích thước cho các phần tử trên giao diện website như width, height, margin, padding, ... Vậy cụ thể về các đơn vị tính trong CSS như thế nào, các bạn cùng mình tìm hiểu trong bài viết này nhé.

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, %...

Quy định về đơn vị trong CSS:

• Giá trị số rồi đến đơn vị, VD: 10px, 2em, 50%, ...
• Tuyệt đối không có dấu cách giữa số và đơn vị tính.
• Nếu giá trị số là 0, có thể bỏ qua đơn vị tính.
• Một số đơn vị cho phép sử dụng số âm. VD: padding-top:-20px; margin-top: -20%; Nhưng phần lớn các đơn vị khác là số dương.

Trong khuân khổ bài chia sẻ này mình sẽ cùng các bạn tìm hiểu những đơn vị tính thường sử dụng trong CSS. Mặc dù sẽ không đề cập hết nhưng không có nghĩa là những đơn vị đó sẽ không được sử dụng, các bạn nên tìm hiểu qua để biết và lựa chọn đơn vị tính phù hợp.

Trong CSS có hai loại đơn vị là Đơn vị tương đối (Relative Units) và Đơn vị tuyệt đối (Absolute Units). Trong đó:

1. Đơn vị tương đối - Relative Units

Đơn vị tương đối là đơn vị được tính một cách tương đối so với phần tử mẹ hoặc các phần tử khác. Đơn vị tương đối cơ động và hoạt động tốt hơn cho những thiết bị, những màn hình có kích thước và độ phân giải khác nhau.

Một số đơn vị tương đối chính được sử dụng trong CSS:

• % (percentages): Đơn vị tương đối về kích thước của phần tử con so với phần tử mẹ (parrent). Ví dụ: Nếu phần tử mẹ có thuộc tính width:500px, phần tử con có thuộc tính width:50% thì có nghĩa là phần tử con có thuộc tính width:250px

• em: Là đơn vị tương đối dựa vào thuộc tính font-size của phần tử mẹ. Ví dụ: Nếu phần tử mẹ có thuộc tính font-size:16px, phần tử con có thuộc tính font-size:2em thì có nghĩa là phần tử con có thuộc tính font-size:32px
• rem(root em): Là đơn vị tương đối dựa vào thuộc tính font-size của phần html (root element). Ví dụ: Nếu phần tử html có thuộc tính font-size:12px phần tử mẹ có thuộc tính font-size:16px, phần tử con có thuộc tính font-size:2rem thì có nghĩa là phần tử con có thuộc tính font-size:24px; Tức là đơn vị rem không phụ thuộc vào phần tử mẹ.

2. Đơn vị tuyệt đối - Absolute Units

Khác với đơn vị tương đối, như tên gọi, đơn vị tuyệt đối sẽ có những giá trị cố định không thay đổi. Đơn vị tuyệt đối không được khuyến khích sử dụng cho màn hình, vì có rất nhiều các kích thước màn hình khác nhau. Nó chỉ nên dùng cho những trường hợp biết chắc kích thước của giao diện, như xuất ra máy in chẳng hạn.

Một số đơn vị tuyệt đối được sử dụng trong CSS:

• px *: pixels (1px = 1/96th of 1in)
• pt: points (1pt = 1/72 of 1in)
• pc: picas (1pc = 12 pt)
• cm: centimeters
• mm: millimeters
• in: inches (1in = 96px = 2.54cm)

* Pixels (px) là khác nhau giữa các thiết bị. Với các thiết bị có độ phân giải thấp (low-dpi devices), 1px là một chấm điểm hiển thị trên màn hình của thiết bị. Với máy in và các thiết bị có độ phân giải cao, 1px lại là nhiều chấm điểm hiển thị trên màn hình của thiết bị.

3. Kết luận

Mặc dù có khá nhiều đơn vị khác nhau trong CSS, nhưng các đơn vị phổ biến và nên dùng chỉ đơn giản là px, %, em và rem. Với đơn vị pt cũng như các đơn vị khác, lời khuyên của mình là không nên dùng và không cần quá quan tâm cho đau đầu! Trong thiết kế web Responsive để tương thích với nhiều kích thước màn hình và nhiều độ phân giải khác nhau, bạn nên sử dụng triệt để các đơn vị tương đối như %, em và rem. Chúc bạn thành công!

* Để chuyển đổi đơn vị từ px sang em, bạn có thể sử dụng công cụ online đơn giản tại link này. Giá trị font size mặc định thường là 16px.