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.

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ậpwidth: 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ếufont-sizecủa tài liệu là 12px, 1em sẽ bằng 12px, 0.5em = 6px,…

Sử dụng khi nào?

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 ...

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ế 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