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

bookmark_border Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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, từ đó 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à số nguyên không có đơ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% của 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.

Bạn cũng có thể sử dụng số ở 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 các kênh màu: rgb(50, 50, 50), trong đó các giá trị 0-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ước, 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 ví dụ trước, 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 phân giải theo cùng một cơ sở, giúp bạn dự đoán được độ dài bất cứ khi nào sử dụng trong CSS. Ví dụ: nếu bạn sử dụng cm để định cỡ phần tử rồi in, kích thước sẽ chính xác nếu bạn so sánh với thước kẻ. Xin lưu ý rằng các đơn vị vật lý, chẳng hạn như cm và in, sẽ không hiển thị một cách đáng tin cậy ở các kích thước đó trên màn hình do sự khác biệt về kích thước pixel. Tốt nhất là bạn nên sử dụng đơn vị vật lý cho các trang tính kiểu in, vì các đơn vị này sẽ đáng tin cậy hơn.

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 có thể 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. Điểm khác biệt giữa các giá trị này và tỷ lệ phần trăm là bạn có thể xác định kích thước dựa trên kích thước cơ sở có liên quan, chẳng hạn như kích thước phông chữ mặc định hoặc kích thước cửa sổ. Điều này có nghĩa là CSS có các đơn vị như ch sử dụng các chỉ số kích thước của phông chữ 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). Độ 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.

Các đơn vị thay thế tương đối với khung nhìn

Giá trị của các đơn vị tương ứng với khung nhìn vẫn giữ nguyên miễn là kích thước khung nhìn không thay đổi. Tuy nhiên, trình duyệt di động thường hiển thị hoặc ẩn các thành phần trên giao diện người dùng để hiển thị nhiều nội dung nhất có thể trên màn hình nhỏ mà không thay đổi kích thước được tính toán của khung nhìn. Bạn có thể sử dụng các đơn vị thay thế cho đơn vị tương ứng với khung nhìn để tính đến những thay đổi này đối với vùng hiển thị.

Đơn vị tương ứng với vùng chứa

Bạn có thể sử dụng kích thước của vùng chứa của một phần tử làm cơ sở tương đối. Các đơn vị này chia không gian vùng chứa có sẵn. Các thuộc tính này hữu ích bên trong truy vấn vùng chứa để đặt kích thước phông chữ dựa trên không gian có sẵ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 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);
}

Khi sử dụng đơn vị góc deg, bạn có thể xoay div 90° trên trục tâm của nó.

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 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 mức độ hiểu biết

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
• Kích thước và đơn vị trên MDN
• Tất tần tật về dịch vụ EMS
• Nội dung giải thích về tỷ lệ phần trăm