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ập width: 50% sẽ có độ rộng bằng một nửa thành phần chứa nó (parent).
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ữ parent. Nếu font-size của parent là 12px, 1em sẽ bằng 12px, 0.5em = 6px,…
rem: root em, tương tự như em nhưng rem là đơn vị tỉ lệ với font-size của thẻ html

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à… :D . 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

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.

Related Post


Tổng hợp 20 mẫu giao diện người dùng theo xu hướng thiết kế phẳng - Flat design
Wednesday, September 25, 2013
Ở bài này tôi xin chia sẻ một số mẫu giao diện người dùng theo xu hướng thiết kế phẳng - Flat desin. Toàn bộ được chia sẻ miễn phí và ở định dạng PSD, bạn có thể dễ dàng lấy về để áp dụng ngay vào website của mình một cách rất nhanh chóng và chuyên nghiệp.
Tổng hợp một số icon website theo xu hướng thiết kế phẳng - Flat design
Saturday, September 21, 2013
Flat design – thiết kế phẳng đã từng phổ biến nhiều năm trước đây, nay đang trở lại và được thế giới đón nhận khá tốt. Hình ảnh tiêu biểu của thiết kế phẳng chính là Windows 8 – một phong cách thiết kế đơn giản nhưng vẫn có sức hút riêng. Không chỉ là xu hướng riêng cho các phần mềm ứng dụng, thiết kế phẳng đang được áp dụng khá phổ biển vào xu hướng thiết kế web hiện đại, ở đây tôi xin chia sẻ một số bộ icon theo xu hướng này để các bạn áp dụng vào website của mình.
Search

Đăng ký nhận bài mới


Category

Blog Archive