Chắc hẳn trong quá trình viết CSS cho một trang web có responsive, bạn đã rất đau đầu trong việc lựa chọn đơn vị sao cho phù hợp để code responsive càng ít càng tốt. Trong bài viết này Mẫu website 24h sẽ chia sẻ cho các bạn tất tần tật về các đơn vị trong CSS, giúp các bạn có thể giải quyết được phần nào thắc mắc và khó khăn. Hãy theo dõi đến cuối bài viết nhé.

Mục Lục

Các đơn vị trong CSS

Đơn vị kích thước tương đối CSS (Relative Units)

Là đơn vị được tính một cách tương đối dựa trên những phần tử khác (có thể là phần tử cha hay phần tử root). Những đơn vị này thường khá linh động, sẽ phù hợp cho việc thích ứng trên các thiết bị khác nhau. Một số đơn vị tương đối như: rem, em, %, vw, vh, ex, ch, vmin, vmax

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

Đơn vị kích thước tuyệt đối CSS (Absolute units)

Là đơn vị có giá trị không bao giờ thay đổi và không bị ảnh hưởng bởi những thành phần khác. Tức là trong mọi kích thước màn hình thì kích thước của nó vẫn như thế. Đối với loại đơn vị này chỉ nên dùng cho những kích thước cố định hay kích thước nhỏ không quá ảnh hưởng như border,…

Một số đơn vị tuyệt đối được sử dụng trong CSS:

Đơn vị	Chú Thích
cm	centimeters
mm	millimeters
in	inches (1in = 96px = 2.54cm)
px *	pixels (1px = 1/96th of 1in)
pt	points (1pt = 1/72 of 1in)
pc

Quy định về các đơn vị trong CSS

Giá trị số rồi đến đơn vị, VD: 20px, 2em, 50%, …
Không có dấu cách giữa số và đơn vị tính.
Nếu giá trị số là 0, có thể bỏ qua đơn vị tính.
Một số đơn vị cho phép sử dụng số âm. VD: margin-top: -20%; Nhưng phần lớn các đơn vị khác là số dương.

Các trình duyệt hỗ trợ

Đơn vị
em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
ch	27.0	9.0	1.0	7.0	20.0
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0
vmin	20.0	9.0*	19.0	6.0	20.0
vmax	26.0	Not supported	19.0	7.0	20.0

Lời kết

Trong CSS hỗ trợ rất nhiều đơn vị, qua những chia sẻ này của Mẫu website 24h, hi vọng các bạn đã biết được một số đơn vị phổ biến và cách sử dụng của chúng, từ đó lựa chọn các đơn vị trong CSS phù hợp nhất cho dự án của mình. Chúc các bạn thành công. Mọi thắc mắc hãy liên hệ với chúng tôi – Dịch vụ thiết kế website hàng đầu Việt Nam.

Tin tức

Các đơn vị trong CSS và cách sử dụng