Đơn vị kích thước

The CSS Podcast – 008: Đơn vị đo kích thước

Web là một phương tiện thích ứng, nhưng đôi khi bạn muốn kiểm soát kích thước của web để cải thiện chất lượng tổng thể của giao diện. Một ví dụ điển hình về điều này là giới hạn độ dài dòng để cải thiện khả năng đọc. Bạn sẽ làm điều đó như thế nào trong một môi trường linh hoạt như web?

Trong trường hợp này, bạn có thể sử dụng đơn vị ch, bằng chiều rộng của ký tự "0" trong phông chữ đã kết xuất ở kích thước được tính toán. Đơn vị này cho phép bạn giới hạn chiều rộng của văn bản bằng một đơn vị được thiết kế để định cỡ văn bản, nhờ đó, cho phép kiểm soát dự đoán được bất kể kích thước của văn bản đó. Đơn vị ch là một trong số ít các đơn vị hữu ích cho các ngữ cảnh cụ thể như ví dụ này.

Numbers

Số được dùng để xác định opacity, line-height và thậm chí là cho các giá trị kênh màu trong rgb. Số là các số nguyên không đơn vị (1, 2, 3, 100) và số thập phân (.1, .2, .3).

Số có ý nghĩa tuỳ thuộc vào ngữ cảnh. Ví dụ: khi xác định line-height, một số sẽ đại diện cho một tỷ lệ nếu bạn xác định số đó mà không có đơn vị hỗ trợ:

p {
  font-size: 24px;
  line-height: 1.5;
}

Trong ví dụ này, 1.5 bằng 150% kích thước phông chữ pixel được tính toán của phần tử p. Điều này có nghĩa là nếu p có font-size là 24px, thì chiều cao dòng sẽ được tính là 36px.

Số cũng có thể được dùng ở những vị trí sau:

• Khi đặt giá trị cho bộ lọc: filter: sepia(0.5) áp dụng bộ lọc màu nâu đỏ 50% cho phần tử.
• Khi đặt độ mờ: opacity: 0.5 áp dụng độ mờ 50%.
• Trong kênh màu: rgb(50, 50, 50), trong đó các giá trị từ 0 đến 255 được chấp nhận để đặt giá trị màu. Xem bài học về màu sắc.
• Để biến đổi một phần tử: transform: scale(1.2) sẽ điều chỉnh tỷ lệ phần tử đó theo tỷ lệ 120% kích thước ban đầu.

Tỷ lệ phần trăm

Khi sử dụng tỷ lệ phần trăm trong CSS, bạn cần biết cách tính tỷ lệ phần trăm đó. Ví dụ:width được tính theo tỷ lệ phần trăm chiều rộng có sẵn trong phần tử mẹ.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

Trong ví dụ trên, chiều rộng của div p là 150px, giả sử bố cục sử dụng box-sizing: content-box mặc định.

Nếu bạn đặt margin hoặc padding dưới dạng tỷ lệ phần trăm, thì các giá trị này sẽ là một phần của chiều rộng phần tử mẹ, bất kể hướng.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

Trong đoạn mã trên, cả margin-top và padding-left sẽ tính toán thành 150px.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

Nếu bạn đặt giá trị transform dưới dạng phần trăm, giá trị này sẽ dựa trên phần tử có nhóm biến đổi. Trong ví dụ này, p có giá trị translateX là 10% và width là 50%. Trước tiên, hãy tính chiều rộng: 150px vì chiều rộng này bằng 50% chiều rộng của thành phần mẹ. Sau đó, lấy 10% của 150px, tức là 15px.

Kích thước và chiều dài

Nếu bạn đính kèm một đơn vị vào một con số, thì con số đó sẽ trở thành một phương diện. Ví dụ: 1rem là một phương diện. Trong ngữ cảnh này, đơn vị được đính kèm với một số được gọi là mã thông báo phương diện trong thông số kỹ thuật. Chiều dài là phương diện đề cập đến khoảng cách và có thể là tuyệt đối hoặc tương đối.

Chiều dài tuyệt đối

Tất cả các độ dài tuyệt đối đều được phân giải dựa trên cùng một cơ sở, giúp dự đoán các độ dài này ở bất cứ nơi nào trong CSS của bạn. Ví dụ: Nếu bạn sử dụng cm để định kích thước phần tử rồi in ra, thì kết quả phải chính xác nếu bạn so sánh với thước kẻ.

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

Nếu bạn in trang này, div sẽ in dưới dạng hình chữ nhật màu đen 10x5cm. Xin lưu ý rằng CSS không chỉ được dùng cho nội dung kỹ thuật số mà còn được dùng để tạo kiểu cho nội dung in. Chiều dài tuyệt đối thực sự hữu ích khi thiết kế cho bản in.

Độ dài tương đối

Độ dài tương đối được tính theo một giá trị cơ sở, giống như tỷ lệ phần trăm. Sự khác biệt giữa các đơn vị này và tỷ lệ phần trăm là bạn có thể định cỡ các phần tử theo ngữ cảnh. Tức là CSS có các đơn vị như ch sử dụng kích thước văn bản làm cơ sở và vw dựa trên chiều rộng của khung nhìn (cửa sổ trình duyệt của bạn). Độ dài tương đối đặc biệt hữu ích trên web do tính chất thích ứng của nó.

Đơn vị tương đối theo kích thước phông chữ

CSS cung cấp các đơn vị hữu ích tương ứng với kích thước của các phần tử kiểu chữ được kết xuất, chẳng hạn như kích thước của chính văn bản (đơn vị em) hoặc chiều rộng của các ký tự kiểu chữ (đơn vị ch).

Đơn vị tương ứng với khung nhìn

Bạn có thể sử dụng kích thước của khung nhìn (cửa sổ trình duyệt) làm cơ sở tương đối. Các đơn vị này chia không gian khung nhìn có sẵn.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

Trong ví dụ này, div sẽ là 10% chiều rộng của khung nhìn vì 1vw là 1% chiều rộng của khung nhìn. Phần tử p có max-width là 60ch, nghĩa là không được vượt quá chiều rộng 60 ký tự "0" trong phông chữ và kích thước được tính toán.

Đơn vị khác

Có một số đơn vị khác được chỉ định để xử lý các loại giá trị cụ thể.

Đơn vị góc

Trong mô-đun màu, chúng ta đã xem xét các đơn vị góc. Các đơn vị này rất hữu ích trong việc xác định các giá trị độ, chẳng hạn như sắc độ trong hsl. Các hàm này cũng hữu ích trong việc xoay các phần tử trong hàm biến đổi.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

Sử dụng đơn vị góc deg, bạn có thể xoay div 90° trên trục giữa.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Đơn vị độ phân giải

Trong ví dụ trước, giá trị của min-resolution là 192dpi. Đơn vị dpi là viết tắt của số chấm trên mỗi inch. Một bối cảnh hữu ích cho việc này là phát hiện màn hình có độ phân giải rất cao, chẳng hạn như màn hình Retina trong truy vấn nội dung nghe nhìn và phân phát hình ảnh có độ phân giải cao hơn.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về việc định cỡ

Tài nguyên

• Mức 4: Giá trị và đơn vị quy cách CSS
• Định kích thước và đơn vị trên MDN
• Tất tần tật về dịch vụ EMS
• Thông báo giải thích về tỷ lệ phần trăm