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

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)

Các đơn vị trong CSS

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ị chorme edge firefox safia opera
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.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *