Trang chủ>CNTT>Lập trình HTML CSS

Lập trình html-css đơn vị trong css

27/05/2022 185 lượt xem

Đơn vị tuyệt đối(Absolute unit)

Đơn vị tuyệt đối (Absolute Units) là những đơn vị mà giá trị của nó không bao giờ thay đổi và không bị ảnh hưởng bởi các 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ế. Với loại đơn vị này chỉ nên dùng cho những thứ có kich thước cố định, hoặc kích thước nhỏ không quá ảnh hưởng như border, … Một vài đơn vị tuyệt đối như: px, pt, cm, mm, pc, in.

  • cm – centimeters
  • mm – millimeters
  • in – inches (1in = 96px = 2.54cm)
  • pt – points (1pt = 1/72 of 1in)
  • px – pixels (1px = 1/96th of 1in)
  • pc – picas (1pt = 1/72 of 1in)

Đơn vị tương đối: thay đổi khi đối tượng nó phụ thuộc thay đổi

Đơn vị tương đối (Relative Units) là những đơn vị được tính một cách tương đối dựa trên các phần tử khác (có thể là phần tử cha hoặc phần tử root). Các đơn vị loại này khá linh động, rất thích hợp cho việc thích ứng trên các thiết bị khác nhau. Một vài đơn vị tương đối như: rem, em, %, vw, vh, ex, ch, vmin, vmax

  • %
  • rem
  • em
  • vw
  • vh
  • vmin
  • vmax
  • ex
  • ch

Đơn vị rem và em

em là đơn vị mà giá trị của nó được tính dựa trên tỉ lệ so với phần tử cha của nó hoặc chính nó thông qua giá trị của thuộc tính font-size.

Mức độ ưu tiên sẽ tính theo font-size của nó trước, nếu nó không set thuộc font-size thì lấy của cha trực tiếp. Nếu cha nó không có thì lấy tiếp cha của cha nó Đến khi nào đến root thì thôi.

rem và em

rem (root em) tương tự như em, nhưng đơn giản là nó sẽ tỉ lệ theo thuộc tính font-size của phần tử root <html>

html { font-size: 20px; }

div { 
  /* 2rem = 2 * 20px = 40px */ 
  font-size: 2rem; 
}

Tips: Đâu đó bạn sẽ thấy đoạn code này html { font-size: 62.5% }. Vậy nó có ý nghĩa gì?

Theo mặc định của trình duyệt, thẻ html có font-size là 16px = 100%. Vậy 62.5% = 10px, set như thế để dễ cho việc tính toán chia tỉ lệ theo rem dễ hơn rất nhiều đúng không nào. VD như 2.5rem = 25px

Đơn vị vw, vh, %

vw (view width) sẽ tính theo tỉ lệ chiều rộng khung nhìn thiết bị của bạn. 1 vw = 1/100 chiều rộng view-port. Ví dụ: màn hình của bạn có chiều rộng 1100px thì 1vw = 11px;

vh (view height) tương tự vw, vh sẽ tỉ lệ theo chiều cao của khung nhìn thiết bị.

% – đơn vị phần trăm sẽ tỉ lệ theo phần tử cha trực tiếp của nó.

Đơn vị vmin và vmax

2 đơn vị này tương tự như vw và vh. Điểm khác biệt là nó sẽ không tỉ lệ theo 1 hướng mà là cả 2, tuỳ thuộc vào độ lớn của chiều cao và chiều rộng màn hình. Cụ thể:

1 vmin = 1 vw hoặc 1 vh (Lấy cái nhỏ hơn). VD: màn hình của bạn có kích thước là 840×640 thì 1 vmin = 6.4px, nếu màn hình của bạn là 360×480 thì 1 vmin = 3.6px

1 vmax = 1 vw hoặc 1 vh (Lấy cái lớn hơn). VD: màn hình của bạn có kích thước là 840×640 thì 1 vmin = 8.4px, nếu màn hình của bạn là 360×480 thì 1 vmin = 4.8px

Đơn vị ex và ch

2 đơn vị này mình thấy khá ít sử dụng và nên bạn có thể đọc để tham khảo thôi nhé.

ch là đơn vị được tính theo chiều rộng của ký tự “0”. Với những font chữ là monospace thì các ký tự đều có cùng 1 chiều rộng.

ex theo định nghĩa thì nó liên quan đến chiều cao của ký tự “x” của font chữ hiện tại (rất ít khi sử dụng).

Bảng tóm tắt các đơn vị trong CSS

Tên đơn vịGiải thích
emTỉ lệ với thuộc tính font-size của chính nó hoặc phần tử cha
remTỉ lệ với thuộc tính font-size của phần tử root (html)
vwTỉ lệ với kích thước chiều rộng khung nhìn. 1vw = 1% viewport width
vhTỉ lệ với kích thước chiều cao khung nhìn. 1vw = 1% viewport height
%Tỉ lệ phần trăm với phần tử cha
vmin1 vmin = 1 vw or 1 vh (Chọn cái nào nhỏ hơn)
vmax1 vmin = 1 vw or 1 vh (Chọn cái nào lớn hơn)
ch1 ch = chiều rộng của ký tự “0”
ex1 ex = chiều cao của ký tự x trong font chữ hiện tại
Đơn vị tương đối
Tên đơn vịGiải thích
pxpixels (1px = 1/96th of 1in)
ptpoints (1pt = 1/72 of 1in)
pcpicas (1pc = 12 pt)
mmmillimeters
cmcentimeters
ininches (1in = 96px = 2.54cm)
Đơn vị tuyệt đối