Bài viết này chủ yếu giới thiệu về các đơn vị độ dài trong phát triển web như px, pt, em,… rất hữu ích cho những ai đang học hoặc làm về lập trình front-end.
1. Các loại đơn vị độ dài phổ biến
Các đơn vị độ dài như cm, mm, in, px, em, ex, rem, %,… thường được chia thành hai loại:
* **Đơn vị độ dài tuyệt đối**: Có giá trị cố định, không thay đổi theo môi trường hiển thị.
* **Đơn vị độ dài tương đối**: Phụ thuộc vào phần tử cha hoặc môi trường hiển thị.
2. Đơn vị độ dài tuyệt đối
Đơn vị tuyệt đối có giá trị vật lý cố định, không bị ảnh hưởng bởi thiết bị hay trình duyệt. Các đơn vị phổ biến:
* `cm` (centimet): 1m = 100cm.
* `mm` (milimet): 1cm = 10mm.
* `in` (inch): 1in = 2.54cm.
* `pt` (point): 1in = 72pt. Ví dụ: 24pt tương đương 1/3 inch.
* `pc` (pica): 1pc = 12pt, 6pc = 1in.
Trong phát triển web, các đơn vị này ít được sử dụng vì không thân thiện với hiển thị linh hoạt, chủ yếu dùng trong in ấn.
3. Đơn vị độ dài tương đối
Đây là nhóm đơn vị được sử dụng nhiều trong thiết kế responsive. Bao gồm:
px (pixel)
* Là đơn vị tương đối dựa trên độ phân giải màn hình.
* Ưu điểm: chính xác, ổn định.
* Nhược điểm: kém linh hoạt, khó điều chỉnh kích thước font trong một số trình duyệt cũ như IE.
em
* Dựa vào kích thước font của phần tử cha.
* Mặc định 1em = 16px (nếu không có thiết lập nào khác).
* Để đơn giản hóa, có thể đặt `font-size: 62.5%` cho `body` ⇒ 1em = 10px.
Ví dụ:
12px = 1.2em
10px = 1em
Đặc điểm:
* Không cố định.
* Kế thừa từ phần tử cha.
* Công thức tính: `1 ÷ font-size của phần tử cha × số px cần chuyển đổi = giá trị em`
ex
* Dựa vào chiều cao chữ thường “x”.
* Giá trị phụ thuộc vào font đang sử dụng.
* Trong thực tế, 1ex thường ≈ 0.5em.
rem (root em)
* Là đơn vị tương đối mới trong CSS3.
* Dựa vào font-size của phần tử gốc (`html`).
* Ưu điểm: dễ kiểm soát, tránh bị lồng nhiều lớp kích thước như em.
* Tương thích tốt với hầu hết trình duyệt hiện đại (trừ IE9 trở xuống).
Lưu ý khi dùng rem:
1. Nếu không đặt `font-size` cho `html`, mặc định 1rem = 16px.
2. Không nên đặt `font-size` < 12px hoặc < 75%, vì trình duyệt có thể không hỗ trợ.
4. Một số đơn vị thường dùng
* **px**: Tương đối theo độ phân giải màn hình.
* **em**: Tương đối theo font-size của phần tử cha, kế thừa.
* **rem**: Tương đối theo font-size của `html`, giúp đồng bộ kích thước toàn trang.
* **pt**: Đơn vị in ấn, 1pt = 1/72 inch.
Kết luận
Trên đây là bài tổng hợp về các đơn vị độ dài thường dùng trong lập trình web. Việc nắm rõ đặc điểm và cách sử dụng sẽ giúp bạn xây dựng giao diện linh hoạt, thân thiện với người dùng và tối ưu hóa hiển thị trên nhiều thiết bị. Hãy tiếp tục theo dõi các bài viết khác để cập nhật thêm kiến thức hữu ích!
Tài nguyên này được người dùng tải lên và nội dung được lấy từ Internet. Trang web này chỉ giới thiệu miễn phí để học tập và chia sẻ. Nếu có bất kỳ vấn đề bản quyền hoặc vấn đề nào khác, vui lòng liên hệ với biên tập viên của trang web này để xử lý!
Lưu ý quan trọng: : Nếu phần mềm liên quan đến thanh toán, thành viên, nạp tiền, v.v., thì đây là những hành động của nhà phát triển phần mềm hoặc công ty sở hữu phần mềm đó và không liên quan gì đến trang web này. Cư dân mạng cần phải tự đưa ra phán đoán của mình.
