Hack

Đối với những người thiết kế website và lập trình web thì hiểu rõ các đơn vị sử dụng cho kích thước là một điều cần thiết. Nhất là khi làm việc với CSS thì chắc hẳn mọi người đã quen thuộc với các đơn vị px, pt, em, %. Vậy thực chất chúng ta đã hiểu rõ về các đơn vị này chưa? khi nào thì sử dụng px, pt, em hay %. Bài viết này mong sẽ giúp mọi người có cái nhìn sáng tỏ hơn với các đơn vị đó.

• px được viết tắt từ Pixel, là đơn vị điểm ảnh trên screen media (cụ thể là máy tính). Một pixel tương đương với một điểm trên màn hình máy tính, là đơn vị hiển thị nhỏ nhất trên màn hình. Số lượng điểm ảnh này phụ thuộc vào kích cỡ màn hình và độ phân giải (resolusion) của màn hình đó. Kích thước của một điểm ảnh cũng phụ thuộc vào kích thước màn hình và độ phân giải khác nhau thì không giống nhau.
• pt được viết tắt từ Point, là đơn vị được sử dụng trong in ấn. Một point xấp xỉ gần bằng 1/72 inch. Điều đó có nghĩa là kích thước 1 point là cố định dù trên bất cứ màn hình nào, độ phân giải nào. Thông thường với màn hình CRT 15" (kích thước màn hình thật sự chỉ khoảng 14"2/9) và ở độ phân giải cao nhất là 1024x768 thì DPI là 96 - có nghĩa là 96 pixels trên 1 inch, tức là 1 px = 0.75 pt. Nhưng cũng màn hình đó nếu set về độ phân giải là 800x600 thì DPI là 56.25, có nghĩa là 1 px = 1.28 pt.
• em và % đều là đơn vị đo lường tương đối. 1 em bằng kích thước của font chữ hiện tại, ví dụ nếu font-size của tài liệu là 12pt thì 1em = 12pt = 100%.

Như vậy nếu chúng ta sử dụng đơn vị pt thì kích thước sẽ luôn luôn cố định dù bất cứ màn hình có kích thước và độ phân giải nào. Tức là nếu xem trên màn hình 12" cũng như xem trên màn hình 21"! Nếu sử dụng px thì cách hiển thị sẽ được phụ thuộc vào màn hình có kích thước và độ phân giải. Do vậy px là đơn vị hay được lựa chọn để sử dụng. Nhưng công việc hiển thị không những phụ thuộc vào thiết bị mà còn phụ thuộc vào trình duyệt. Trong IE thì chúng ta sẽ không thể resize chữ nếu đã xác định bằng đơn vị px, mà IE thì vẫn đang là trình duyệt chiếm thị phần nhiều nhất trên Internet, do vậy cũng là một điều khó chịu cho những người thiết kết cầu toàn. Xu thế gần đây người ta bắt đầu sử dụng % và em, nhưng 2 đơn vị này thì lại khó tưởng tượng, vì nó tương đối mà. Và đây là một cách đơn giản để sử dụng em mà không cần phải chi ly tính toán giá trị chính xác do cái tỉ lệ 1em = 16px gây ra. Đầu tiên ta thiết lập font-size cho toàn trang như sau (lưu ý đây chỉ là code sử dụng cho thiết lập font-size mặc định của trình duyệt là 16px):

body {font-size:62.5%;}

Khi đó kích thước của 1em sẽ là: 16(px)*0.625 = 10(px). Và như vậy thì việc tính toán kích cỡ của font chữ đã trở nên đơn giản: 1.2em = 12px, 1.4em = 14px,... Như vậy ta có thể thiết lập đc chính xác sự hiển thị font chữ như mong đợi.

Được trích dẫn từ các liên kết dưới đây

1. Đôi điều về font size: pt, px, em và %
2. How to size text using ems
3. CSS Font-Size: em vs. px vs. pt vs. percent