🪴ttuan's garden

Sep 14, 20244 min read

CSS Sizing Units

Summary

  • Các đơn vị sizing trong CSS.
  • Numbers & Percentages: Đôi khi là số cụ thể (vd: 24px), đôi khi là tỷ lệ (%), tính dựa trên phần tử cha hoặc giá trị trước đó, như opacity: 0.5 là 50% độ trong suốt.
  • Absolute & Relative Lengths: Đơn vị tuyệt đối (cm, mm, px) và đơn vị tương đối (em, rem) thường dùng trong thiết kế responsive, với relative lengths linh hoạt hơn.
  • Viewport & Angle Units: Đơn vị theo kích thước viewport (vw, vh) dùng để điều chỉnh theo chiều rộng/chiều cao màn hình; đơn vị góc (vd: rotate(60deg)).

Sizing Units

  • ch - Character Unit:
    • Đơn vị ch trong CSS đo chiều rộng của ký tự 0 trong font chữ hiện tại. Nếu font thay đổi ⇒ kích thước ch cũng thay đổi tương ứng với chiều rộng của ký tự 0 trong font mới.
    • Ví dụ: max-width: 70ch có nghĩa là phần tử sẽ có chiều rộng bằng 70 lần chiều rộng của ký tự 0 trong font chữ đang dùng.
    • Công dụng: Thường được dùng để giới hạn số ký tự hiển thị trên 1 dòng, đảm bảo rằng văn bản không trở nên quá dài và khó đọc. Đặc biệt hữu ích trên các màn hình lớn.

Numbers

  • Đôi khi là con số có đơn vị cụ thể (vd: font-size: 24px), nhưng đôi khi lại là 1 tỷ lệ nào đó, tương quan với tham số liền trước. (ví dụ: line-height: 1.5 ~ 36px do font-size đang là 24px)
  • Có nhiều chỗ sẽ không viết rõ (px, rem, …), mà con số sẽ đại diện cho %. Ví dụ: opacity: 0.5 là 50%, scale(1.2) là scale 120%, …

Percentages

  • Thông thường, “percentages” value sẽ được tính dựa vào phần tử cha. Ví dụ: div p { width: 50% } thì thẻ p sẽ có width = 50% so với phần tử cha bao ngoài
  • Nếu set margin hoặc padding theo %, nó sẽ tự động tính theo width của parent elements.
  • Tùy từng loại properties sẽ có cách tính khác nhau. Ví dụ: width, margin, padding thì tính theo parent elements width, nhưng transformX(10%) thì sẽ tính theo 10% của current element.

Dimensions and lengths

  • Dimension (Kích thước). Ví dụ: 1rem.
  • Length là dimensions that refer to distance.

Absolute lengths

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

cm, mm, Q, in, pc, pt, px là absolute lengths.

Relative lengths

Relative lengths sẽ được tính toán dựa vào 1 giá trị base nào đó (khá giống với kiểu theo %). Các giá trị này thường được sử dụng trong responsive web.

  • em - Relative to the font size. 1.5em = 50% larger than the base computed font size of it’s parent.
  • ex - Tính theo chiều cao của chữ x trong font hiện tại, hoặc 0.5em.
  • cap - Chiều cao của chữ cái in hoa trong font heịen tại.
  • ch
  • ic
  • rem - Font size của root element (mặc định là 16px)
  • lh - Line height of the element
  • rlh - Line height of the root element.
Viewport-relative units
  • vw - 1% của viewport’s width. Thường được dùng để control font, resize header font based on the width of the pages so as user resizes, the font will also resize.
  • vh - 1% của viewport’s height.
  • vi - 1% của viewport’s size in the root element’s inline axis.
  • vb - 1% of viewport’s size in the root element’s block axis.
  • vmin - 1% of the viewport’s smaller dimension.
  • vmax - 1% the viewport’s larger dimension.

Settings element theo Relative lengths sẽ flexible hơn là setting fix cứng như px.

Miscellaneous units

Angle units

  • Đơn vị góc. Ví dụ: transform: rotate(60deg)
  • dpi: dots per inch. (min-resolution: 192dpi)

Graph View

Backlinks