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é.
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.