Các đơn vị đo hay dùng trong CSS

Trong bài viết trước tôi đã giới thiệu về CSS và các cách selecter trong CSS, bài này tôi sẽ ghi lại các đơn vị đo hay dùng trong CSS.

Trong CSS có 2 dạng đơn vị đo đó là đơn vị đo tuyệt đối (Absolute Units) và đơn vị đo tương đối (Relative units). Sau đây là một vài đơn vị đo bạn có thể hay gặp.

1. Absolute units (đơn vị tuyệt đối)

Đặc điểm của đơn vị tuyệt đối là khi kích thước trình duyệt thay đổi thì kích thước của các phần đã đặt kích thước là cố định không thay đổi

Một vài đơn vị đo phổ biến:

• px: với màn hình độ phân giải thấp 1 px trong css có thể tương ứng với 1 px trên màn hình, còn với màn hình độ phân giải cao 1px có thể là nhiều điểm ảnh trên màn hình

• pt
• cm
• mm
• inch
• pc

2. Relative units (đơn vị tương đối)

Đặc điểm của đơn vị đo tương đối: giá trị kích thước là không cố định, nó sẽ thay đổi khi kích thước của đối tượng mà nó phụ thuộc thay đổi.

• % (kích thước sẽ phụ thuộc vào kích thước của thẻ chứa nó hay còn gọi là thẻ cha trực tiếp), theo mặc định 100% sẽ bằng 16px.

Với các thẻ như body, div sẽ mặc định có width: 100%, với chiều cao mặc định các thẻ có height: auto, chiều cao sẽ tự động thay đổi khi nội dung bên trong nó tăng lên.

• Rem (kích thước sẽ phụ thuộc vào kích thước của thẻ html) trong thực tế thường sử dụng đơn vị này hơn đơn vị em vì nó dễ kiểm soát hơn.

Ngoài ra do rem phụ thuộc vào thẻ html nên kích thước của nó sẽ tự tăng giảng theo kích thước trên trình duyệt khác nhau và các thiết bị khác nhau.

html {
 font-size: 20px;
}

Khi đó thẻ h1 sử dụng kích thước là rem như sau:

h1 {
	font-size: 1rem; // lúc này có nghĩa font size h1 sẽ là 20px vì kích thước rem phụ thuộc vào kích thước html
}

Theo mặc định trình duyệt sẽ đặt font-size: 16px vì vậy khi đặt font-size: 1rem sẽ là 16px.

Nếu muốn đặt kích thước là 10px ta sẽ đặt kích thước font-size cho html là: 62.5%, như vậy lúc này 1rem=10px, 1.6rem=16px, 2rem = 20px, 2.4rem =24px..(bạn có thể sử dụng website để chuyển đổi trực tiếp tại địa chỉ: https://nekocalc.com/px-to-rem-converter)

• Em (phụ thuộc vào thẻ gần nhất chứa nó mà có thuộc tính fontsize)

• Vw, vh: chữ v là viết tắt của từ viewport là khung nhìn, w viết tắt của width chiều ngang, h viết tắt của height chiều dọc, vậy vw là  chiều ngang của trình duyệt, vh là chiều dọc của trình duyệt.

Khi nào muốn một đối tượng nào có chiều dọc và chiều ngang luôn bằng kích thước màn hình thí sử dụng đơn vị là vw và vh để đặt, còn muốn chiều dọc và chiều ngang luôn lỉ lệ với đối tượng chứa nó thì sử dụng đơn vị là %

Lưu ý: Một số các thuộc tính CSS mặc định sẽ được trình duyệt đặt sẵn ví dụ như thuộc tính margin (thuộc tính này sẽ tạo ra một khoảng cách giữa các thẻ)

Mặc định margin của thẻ body là: 8px, nó sẽ đẩy xung quanh ra 8px nên vậy bạn sẽ thấy nếu có để độ rộng là 100% thì vẫn nhìn thấy có một khoảng trắng với mép của trình duyệt.. Muốn loại bỏ khoảng trắng này phải reset margin: 0;

Trên đây là một vài đơn vị đo hay được sử dụng trong CSS tôi tổng hợp được, hi vọng nó giúp ích được cho bạn.