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

Podcast CSS - 008: Đơn vị định 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 nó để cải thiện chất lượng giao diện tổng thể. Một ví dụ điển hình cho trường hợp 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 phương tiện linh hoạt như web?

Đối với 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 "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 của văn bản bằng một đơn vị được thiết kế để định cỡ văn bản, từ đó, cho phép kiểm soát có thể dự đoán bất kể kích thước của văn bản đó như thế nào. Đơn vị ch là một trong số nhiều đơn vị hữu ích trong những bối cảnh cụ thể như ví dụ này.

Numbers

Các số được dùng để xác định opacity, line-height và thậm chí cả các giá trị của 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ố có ý nghĩa tuỳ thuộc vào ngữ cảnh của chúng. Ví dụ: khi xác định line-height, số đại diện cho 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. Điều này có nghĩa là nếu p có font-size là 24px, 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) sẽ á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ó thể được chấp nhận để đặt giá trị màu. Xem bài học về màu sắc.
• Cách 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 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 dưới dạng 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 làm tỷ lệ phần trăm, chúng sẽ là 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 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 đặt giá trị transform dưới dạng phần trăm, giá trị đó dựa trên phần tử có tập hợp biến đổi. Trong ví dụ này, p có giá trị translateX là 10% và width có 50%. Trước tiên, hãy tính toán chiều rộng sẽ là: 150px vì nó bằng 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ố, đơn vị đó sẽ trở thành phương diện. Ví dụ: 1rem là một phương diện. Trong trường hợp này, đơn vị đi kèm với một số được đề cập trong quy cách dưới dạng mã thông báo phương diện. Độ dài là các chiều tham chiếu đến khoảng cách và có thể là giá trị tuyệt đối hoặc tương đối.

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

Tất cả độ dài tuyệt đối được phân giải dựa trên cùng một cơ số, giúp bạn dễ dàng dự đoán quảng cáo ở bất cứ nơi nào chúng được sử dụng 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, kết quả sẽ chính xác nếu bạn so sánh nó với một 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 có kích thước 10x5 cm. 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. Chiều dài tuyệt đối có thể thực sự hữu ích khi thiết kế cho báo in.

Chiều dài tương đối

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

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

Đơn vị khung nhìn tương đối

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 chiếm không gian khung nhìn có sẵn.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

Trong ví dụ này, div sẽ chiếm 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 có nghĩa là không được vượt quá chiều rộng 60 "0" các ký tự có trong phông chữ và kích thước được tính toán.

Các đơ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 đơn vị góc, rất hữu ích trong việc xác định giá trị bằng cấp, chẳng hạn như sắc độ trong hsl. Chúng 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);
}

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

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. Ngữ cảnh hữu ích cho vấn đề 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ư Retina hiển thị trong truy vấn phương tiện và phân phối 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ề cách xác định kích thước

Tài nguyên

• Giá trị thông số kỹ thuật CSS và Đơn vị cấp 4
• Định kích thước và đơn vị trên MDN
• Giới thiệu về Ems
• Thông báo giải thích về tỷ lệ phần trăm