Tìm Hiểu Về Các đơn Vị đo Px, Pt, Em, Percent | SAO LINH Group

Đố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à 1024×768 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à 800×600 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.

(Comment: Đầu tiên xác định rằng: 1em=16px

Vậy đơn giản nhất ta cứ xác định font-size bằng đơn vị px trước rồi chia cho 16 là ra đơn vị em:

Ví dụ:

font-size:40px <=> font-size:2.5em /* 40px/16=2.5em */)

Thật ra còncó một số đơn vị kích thước khác như ex, pc, cm, mm và in.

Trong những đơn vị này, pc – cm – mm – in là những đơn vị có kích thước cố định, pc là pica và có giá trị 1pc = 12pt = 1/6in (inch). Còn 3 đơn vị em – % – ex là những đơn vị thuộc dạng relative, tức là có liên quan đến một đơn vị khác hoặc là chính thiết lập mặc định của trình duyệt. Thông thường thiết lập font-size mặc định của trình duyệt là 16px, và khi đó:

1em = 16px, 1ex = 0.5em = 8px.

Nhưng nếu người dùng tự chỉnh sửa các thông số thiết lập này thì giá trị của những đơn vị trên sẽ khác đi. Còn %, cái này thì lại có liên quan đến cách thiết lập font-size bên trong file CSS. Giả sử trong file CSS bạn thiết lập kích thước font cho một số class như sau:

Code:

.bodytext

font-size:16px;

.bodytext p

font-size:75%;

.bodytext p .hd

font-size:150%;

Class .bodytext có font-size là 16px, còn thẻ p nằm trong phần tử có style class .bodytext sẽ có font-size là:

16px * 0.75 = 12px

Còn class .hd nằm trong thẻ p thuộc class .bodytext sẽ có font-size là:

16px * 0.75*1.50 = 18px

Một vài lưu ý về font

 Kích thước của font chỉ tính theo chiều dọc – độ cao của font chữ, còn bề ngang như thế nào thì hoàn toàn phụ thuôc vào kiểu font, hãy để ý điều này khi sử dụng một số font có bề ngang hơi rộng như kiểu font Verdana.

 Mặc dù trên lý thuyết việc set font-size theo đơn vị px là chuẩn xác nhất cho việc hiển thị trang web, nhưng thực tế do mỗi trình duyệt lại có một thiết lập mặc định riêng, cho nên đôi khi dù bạn đã set đầy đủ các giá trị cần thiết cho việc hiển thị font nhưng nhiều lúc vẫn không được như ý muốn. Và một số người đã thử chuyển từ px sang em, kết quả thu được rất khả quan, font chữ thể hiện chính xác hoặc gần như hoàn hảo những gì được thiết lập trong CSS. 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):

Code:

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ó một điểm lưu ý nữa khi sử dụng đơn vị là %, các trình duyệt không phải lúc nào cũng hiển thị như nhau. Giả sử như font-size:100% chẳng hạn,một số hiển thị không chính xác hoàn. Để khắc phục chuyện này một vài người lại có mẹo nhỏ là thay vì sử dụng 100%, họ sử dụng 100.01%. Đối với các trình duyệt hiểu được phần thập phân, thì 100% và 100.01% không khác nhau là bao nhiêu để có thể nhận ra sự khác biệt, còn đối với những trình duyệt bỏ qua giá trị của phần thập phân, 100.01% sẽ đc trả về giá trị 100% và thể hiện đúng như mong muốn.

(Nguồn: huyvq’s blog)