Chọn lựa giữa đơn vị em, px, hay %

Khi học về CSS, chúng ta làm quen với một số đơn vị đo khoảng cách (word-spacing), độ rộng (width), độ cao (height)… như em, px và %. Tuy nhiên, các bạn mới, và nhiều bạn cũ vẫn dùng các đơn vị này một cách lộn xộn, tùy ý. Điều này sẽ gây cản trở trang web của bạn hiển thị tốt trên các thiết bị có kích thước màn hình khác nhau.

Đơn vị px thì sao?

px (pixel) sẽ cho ra một kích cỡ tuyệt đối, dựa trên các pixel trên màn hình. Trong trường hợp bạn chia cột hoặc làm layout (với thẻ <div> chẳng hạn) thì cột có độ rộng 200px sẽ luôn là 200px cho dù bạn phóng to hay thu nhỏ màn hình (zoom), cho dù bạn xem web trên máy để bàn, laptop, smartphone, tablet. Ví dụ, ban đầu một cột chứa được 100 kí tự bề ngang. Khi bạn phóng to, chữ sẽ to ra, trong khi cột vẫn giữ nguyên độ rộng, cột chỉ còn chứa được 70 hay 50 kí tự, và kết quả là chữ sẽ tràn xuống các dòng bên dưới.

Khi nào bạn muốn trang web của mình, với các thành phần đã sắp đặt sẵn luôn cố định dù cửa sổ trình duyệt hay thiết bị dùng duyệt web của người dùng có màn hình to hay nhỏ, bạn hãy dùng px.

TuoiTre.vnPCWorld.com.vn là 2 ví dụ dành cho bạn. Bạn thử giảm độ rộng cửa sổ trình duyệt và quan sát CỘT NỘI DUNG của trang báo/tạp chí.

Đơn vị % thì thế nào?

% sẽ tính độ rộng dựa trên phần trăm độ rộng của vật chứ nó. Như trình duyệt web của bạn có độ rộng 1440px theo chiều ngang. Cột rộng 50% sẽ chiếm 720px. Nếu bạn thu nhỏ bề ngang của cửa sổ trình duyệt còn 1000px, cột lúc này sẽ rộng còn 500px.

% cũng một phần giống như px. Nó không chứa một số kí tự nhất định mà phụ thuộc tỉ lệ giữa kích thước chữ và độ rộng %.

Với đơn vị em thì khác hẳn!

em được xác định trên kích thước của chữ M (chữ ‘m’ in hoa). 1em bằng kích thước của chữ M. Nếu mình không lầm thì với một chữ M chuẩn, nó nằm vừa chính xác trong một hình vuông. Bạn xem thử chữ M dưới bài viết này đi.

Với một chữ M có kích thước (font-size) 20px và một chữ M có kích thước 100px. Ta dùng một cái viền (border) bao lấy chữ lại, với định dạng CSS như sau:

width:1em; height:1em; border:1px solid black

Kết quả như bên dưới

M
M

Ở trên, chữ M nhỏ và chữ M lớn được đặt trong một khung (box) có kích thước 1em và 1em (vuông). Nhưng khung dưới lớn hơn khung trên. Vì 1em ở dưới ứng với kích thước chữ M là 100px, còn ở trên chỉ là 20px.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s