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

Podcast CSS – 008: Đơn vị 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 các kích thước của trang web để cải thiện chất lượng giao diện tổng thể. Một ví dụ điển hình là việc giới hạn độ dài dòng để cải thiện khả năng đọc. Bạn sẽ thực hiện việc đó như thế nào trong một phương tiện linh hoạt như web?

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

Các con số sẽ có ý nghĩa tuỳ thuộc vào ngữ cảnh của chúng. Ví dụ: khi xác định line-height, một số đại diện cho một tỷ lệ nếu bạn xác định tỷ lệ đó 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. Tức là nếu p có font-size là 24px, thì chiều cao dòng sẽ được tính là 36px.

Bạn cũng có thể sử dụng số ở các 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 sẽ áp dụng độ mờ 50%.
• Trong kênh màu: rgb(50, 50, 50), trong đó các giá trị từ 0-255 được chấp nhận để đặt giá trị màu. Xem bài học về màu sắc.
• Để chuyển đổi một phần tử: transform: scale(1.2) đ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 phần trăm trong CSS, bạn cần biết cách tính 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, các giá trị này sẽ chiếm một phần chiều rộng của 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 đều sẽ tính toán cho 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ó bộ 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 của thành phần mẹ: 150px vì nó chiếm 50% chiều rộng của thành phần mẹ. Sau đó, hãy lấy 10%/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 số, thì đơn vị đó sẽ trở thành phương diện. Ví dụ: 1rem là một phương diện. Trong ngữ cảnh này, đơn vị gắn với một số được gọi là thông số kỹ thuật dưới dạng mã thông báo phương diện. Độ dài là tham số đề cập đến khoảng cách và có thể là tuyệt đối hoặc tương đối.

Độ dài tuyệt đối

Tất cả độ dài tuyệt đối đều phân giải dựa trên cùng một cơ sở, giúp bạn dễ dự đoán giá trị này ở bất cứ nơi nào chúng được sử dụng trong CSS. Ví dụ: nếu bạn sử dụng cm để định kích thước phần tử rồi in, thì giá trị này sẽ 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 để tạo kiểu cho nội dung in. Độ dài tuyệt đối có thể thực sự hữu ích khi thiết kế để in.

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

Độ dài tương đối được tính dựa trên giá trị cơ sở, giống như phần trăm. Sự khác biệt giữa tỷ lệ phần trăm và tỷ lệ phần trăm này là bạn có thể xác định kích thướ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 đáp ứng của nó.

Đơn vị tương đối – 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 thành phần kiểu chữ được kết xuất, chẳng hạn như kích thước của văn bản (đơn vị em) hoặc chiều rộng của các ký tự kiểu chữ (ch đơn vị).

Đơn vị tương đối trong 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 phần không gian khung nhìn có sẵn.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

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

Đơ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 đã tìm hiểu đơn vị góc, rất hữu ích khi 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 khi xoay các phần tử trong hàm biến đổi.

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

Khi 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ố điểm trên mỗi inch. Một ngữ cảnh hữu ích cho việc này là phát hiện các 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 mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về kích thước

Tài nguyên

• Giá trị thông số kỹ thuật của CSS và đơn vị cấp 4
• Kích thước và đơn vị trên MDN
• Tất cả thông tin về Ems
• Nội dung giải thích về tỷ lệ phần trăm