Trong CSS có nhiều đơn vị khác nhau, phần lớn chúng đều là các đơn vị đo lường kích thước của các phần tử (“length” value) như width, margin, padding, font-size, border-width,… Hãy cùng MyLop.BanMai.Info tìm hiểu về các loại đơn vị này trong CSS nhé.

Một số luật 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ị!
• Nếu giá trị số là 0, đơn vị có thể bỏ qua
• Một số đơn vị cho phép sử dụng số âm, VD: margin-top:-20px; Phần lớn các đơn vị khác là số dương.
• Có 2 kiểu đơn vị: Tương đối và tuyệt đối

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

Đơ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). VD 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ẹ. VD 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). VD 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

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 chân thà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.

4. Tham khảo, từ khóa để tìm kiếm:

– CSS Units

– px css, em css, rem css, % css,…

– Đơn vị trong css…

Cheers,

The following two tabs change content below.

• Bio
• Latest Posts

Lục Đức Thành

Giáo viên at FPT Arena

Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Latest posts by Lục Đức Thành (see all)

• Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
• Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
• WordPress 5 có gì mới? - 23/12/2018
• Sublime Text 3 Portable Windows 64 bit - 11/12/2017
• Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017