10+ đơn vị CSS có thể bạn chưa biết

CSS có nhiều đơn vị khác nhau để thể hiện độ dài, nhưng thật khó làm việc khi bạn không biết đến nó.

Khi công nghệ web phát triển, nhu cầu về các giải pháp mới cũng phát triển. Vì vậy, với tư cách là nhà thiết kế web và nhà phát triển giao diện người dùng, bạn cần nắm rõ về các đơn vị để lựa chọn giải pháp tốt nhất.

Nhiều thuộc tính CSS có giá trị chiều dài, cần dùng đến đơn vị đo lường, chẳng hạn như: width, height, padding, margin, font-size,... Đặc trưng của các chiều dài của CSS được phép âm và nó được thể hiện qua 2 loại đơn vị chiều dài: Tuyệt đối và tương đối.

Hãy cùng tìm hiểu về chúng, và có thể bạn chưa từng nghe đến chúng.

Độ dài tuyệt đối

Các độ dài tuyệt đối này không khuyến khích sử dụng trên màn hình, vì kích thước màn hình luôn thay đổi. Tuy nhiên, chúng có thể được sử dụng với một số phương tiện, chẳng hạn như bố trí in.

#	Unit	Description
1	cm	centimeters
2	mm	millimeters
3	in	inches (1in = 96px = 2.54cm)
4	px	pixels
5	pt	points
6	pc	picas (1pc = 12 pt)

Trong các đơn vị trên, bạn chỉ cần để ý đến đơn px, pt. Vì các đơn vị khác hiếm khi được dùng đến.

px (pixels)

px là đơn vị điểm ảnh trên màn hình, một pixel tương đương với một điểm trên màn hình máy tính, là đơn vị hiển thị nhỏ nhất trên màn hình.

Số lượng điểm ảnh này phụ thuộc vào kích cỡ màn hình và độ phân giải của màn hình đó. Kích thước của một điểm ảnh cũng phụ thuộc vào kích thước màn hình và độ phân giải khác nhau thì không giống nhau.

pt (points)

pt là đơn vị sử dụng trong in ấn, pt sẽ cố định trên bất kì màn hình nào và độ phân giải nào. Khi chuyển đổi, 1 px = 0.75 pt và 1pt = 1/72 inch.

Độ dài tương đối

Đơn vị độ dài tương đối xác định độ dài tương đối với thuộc tính độ dài khác. Đơn vị độ dài tương đối tỷ lệ tốt hơn giữa các phương tiện kết xuất khác nhau.

#	Unit	Description
1	em	1em = với kích cỡ của font hiện tại. Tương tự ta có 2em= 2 lần font,...
2	ex	1ex = với chiều cao của 1 chữ x (in thường) của font hiện tại
3	ch	1ch = chiều rộng của số 0
4	rem	giá trị tương đối với font của thành phần gốc
5	vw	1vw = 1% của chiều rộng cửa sổ khung hình
6	vh	1vh = 1% của chiều cao cửa sổ khung hình
7	vmin	1vmin = 1% của khung nhìn nhỏ nhất
8	vmax	1vmax = 1% của khung nhìn nhỏ nhất
9	%	1% = với kích cỡ của font hiện tại

Đơn vị đo tương đối là đơn vị đo thường được phụ thuộc vào 1 thành phần nào đó thì mới xác định được giá trị của nó. Bây giờ chúng ta cùng điểm qua các đơn vị độ dài tương đối này:

rem

rem là đơn vị tham chiếu tỷ lệ so với phần tử gốc của website ở đây là thẻ html dựa vào giá trị của thuộc tính font-size.

Ví dụ, html có font-size: 10px, vậy thì một phần tử trong đó có width: 10rem; đổi ra sẽ có width: 100px.

html {
     font-size: 10px;
}

.test-rem {
     width: 10rem;     /*  Kết quả: 10rem = 100px */
}

em

em là đơn vị tham chiếu tỷ lệ so với phần tử cha trực tiếp chứa nó hoặc chính nó dựa vào giá trị của thuộc tính là font-size.

Ta có ví dụ sau:

.test-em {
     font-size: 10px;
     margin: 10em;
}

Và sau khi chuyển đổi từ em sang px:

.test-em {
     font-size: 10px;
     margin-top: 100px;
     margin-right: 100px;
     margin-bottom: 100px;
     margin-left: 100px;
}

Ta có thể thấy, khi dùng em còn phải chú ý xem phần tử hiện tại có kế thừa thuộc tính font-size của phần tử cha nào không, vì sự kế thừa này sẽ ảnh hưởng đến cách quy đổi em sang pixels.

Tóm lại, bạn có thể thấy sự khác nhau giữa rem và em thông qua diagram sau:

Vì vậy để cho dễ kiểm soát cách quy đổi có lẽ ta nên dùng rem thay vì em để tiện cho việc tính toán.

vh và vw

1 vw = 1% chiều ngang của trình duyệt.

1 vh = 1% chiều cao của trình duyệt.

Với vh, nó có thể lấp đầy 100% về chiều cao của khung nhìn, và không nhất thiết phải là cha mẹ div. vw cũng tương tự. Cụ thể, đối với vh và vw nó thừa hưởng từ cấp root(html), nên nó sẽ không cần phải đi tìm lớp cha, tức là trình duyệt của bạn hay điện thoại bạn rộng bao nhiêu thì nó sẽ lấy bấy nhiêu.

vmax và vmin

Bạn cứ hiểu đơn giản, trong khi vh và vm luôn liên quan đến độ cao và chiều rộng của khung nhìn, vmin và vmax có liên quan đến chiều cao và chiều rộng tối đa hoặc tối thiểu, tùy thuộc vào kích thước nhỏ hơn và lớn hơn.

% (percentages)

% là đơn vị tham chiếu tỷ lệ so với một phần tử mẹ của nó dựa vào kích thước.

Ví dụ bạn có một cái khung với kích thước là 500px và khung bên trong có kích thước là 50% thì nó sẽ là 250px. Nếu bạn sử dụng đơn vị phần trăm này để gán kích thước cho thẻ <html> trên website thì nó sẽ thay đổi theo kích thước màn hình hoặc cửa sổ website.