Tổng hợp các đơn vị kích thước trong thiết kế Web

Trong CSS có khá nhiều đơn vị dùng cho kích thước. Một số có lịch sử từ ngành công nghiệp in ấn như point (pt) hay pica (pc), một số lại rất quen thuộc trong đời sống hàng ngày như cm, mm, in, hoặc là px, em, %,… Vậy điểm khác biệt giữa chúng là gì? Sử dụng chúng trong những trường hợp nào? Bài viết này sẽ làm sáng tỏ phần nào những điều trên khi bạn học thiết kế web.

Hiểu về các đơn vị

  • pt, pc, cm, mm, in: Đây là các đơn vị tuyệt đối. Một thành phần được thiết lập kích thước theo các đơn vị này sẽ không phụ thuộc vào vật hiển thị chúng. Điều này có nghĩa là một font chữ 12pt sẽ bằng nhau trên mọi màn hình laptop, tablet, mobile hay trên giấy in.1in = 2.54cm = 25.4mm = 72pt = 12pc
  • px: Một màn hình hiển thị (screen) được chia thành các điểm, mỗi điểm là một pixel (px). Một màn hình máy tính có độ phân giải 800×600 pixels nghĩa là nó bao gồm 480.000 pixels, chia đều thành 800 cột và 600 hàng. Pixel là đơn vị nhỏ nhất của độ phân giải màn hình.Để hiểu rõ hơn về pixel ta tìm hiểu khái niệm DPI. DPI (dots per inch) cho biết số điểm trên mỗi inch. Hai màn hình với cùng kích thước 14 inches, màn hình 1 độ phân giải 1366×768 có DPI là 111.94, còn màn hình 2 độ phân giải 800×600 cho ta DPI là 71.43. Thành phần với kích thước được thiết lập theo đơn vị pt (hay mm, cm,…) sẽ không thay đổi, còn thành phần thiết lập theo đơn vị px, dễ hiểu ở màn hình 1 nó sẽ có kích thước nhỏ hơn.
  • %: Đơn vị đo lường tương đối. Một thành phần được thiết lập width: 50% sẽ có độ rộng bằng một nửa thành phần chứa nó.
  • em: Tương tự như %, nhưng em là đơn vị tỷ lệ theo font chữ. 1em bằng kích thước của font chữ hiện tại. Nếu font-size của tài liệu là 12px, 1em sẽ bằng 12px, 0.5em = 6px,…

Sử dụng khi nào?

Trên lý thuyết việc dùng px là chuẩn nhất cho việc hiển thị trên web nhưng trong một số trường hợp bạn cần tới các đơn vị khác:

Thiết kế layout “responsive”: sử dụng CSS để tạo ra giao diện hiển thị phù hợp với tất cả các thiết bị và độ phân giải màn hình.

 

Giả sử bạn thiết kế một trang web với phần nội dung chính có độ rộng là 1000px và căn giữa. Bạn dùng laptop ở độ phân giải là 1366×768, và thấy nó rất hợp lý. Tuy nhiên khi thử chuyển sang màn hình destop 1920×1080, bạn lại thấy nó quá nhỏ. Lúc này, bạn nên nghĩ đến việc dùng %:

#main {
  margin: 0 auto;      // Căn giữa
  width: 73.20644%;    // 73.20644% = 1000/1366, là tỷ lệ bạn thấy hợp lý
}

Thay đổi kích thước font chữ toàn trang: giả sử bạn muốn trên desktop độ phân giải cao, kích thước chữ lớn còn trên smartphone độ phân giải thấp, kích thước chữ nhỏ đi nhưng bạn lại đặt kích thước chữ khác nhau tại rất nhiều chỗ khác nhau, do đó bạn phải thay đổi toàn bộ những chỗ này. Oài, nếu có 100 chỗ như thế thì thật là…. Giải pháp ở đây là thiết lập font-size cố định cho toàn trang và thiết lập các thành phần khác tỷ lệ theo nó:

body { font-size: 62.5%; }    // 62.5% = 10px
h1 { font-size: 1.6em; }      // 1.6em = 16px
h2 { font-size: 1.4em; }      // 1.4em = 14px
h3 { font-size: 1.2em; }      // 1.2em = 12px
...

Bạn có thể thắc mắc tại sao lại là 62.5%. Do hầu hết các trình duyệt đều thiết lập font-size mặc định là 16px. Vì thế 62.5% = 10px = 1em. Và đây là cách sử dụng em rất dễ dàng mà không phải mất công tính toán chi ly khi đổi từ px ra em và ngược lại.

Thiết kế CSS cho việc in ấn: bạn nên sử dụng pt cho mục đích này

Kết luận

Trong thực tế thiết kế web còn rất nhiều các trường hợp khác mà ta nên sử dụng đơn vị này hay không nên sử dụng đơn vị kia. Hiểu rõ về các đơn vị và cách sử dụng chúng là điều cần thiết nếu bạn muốn thành thạo lập trình web.

Tags: , , , ,