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.
| Đơn vị | Tên | Tương đương với |
|---|---|---|
| cm | Centimét | 1 cm = 96 px/2,54 |
| mm | Milimet | 1mm = 1/10 của 1cm |
| Hỏi | 1/4 milimét | 1Q = 1/40 của 1cm |
| trong | Inch | 1 inch = 2,54 cm = 96 px |
| máy tính | Picas | 1pc = 1/6 inch |
| pt | Điểm | 1pt = 1/72 inch |
| px | Pixel | 1px = 1/96 inch |
Độ 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ị | so với: |
|---|---|
| em | So với cỡ chữ, nghĩa là 1,5em sẽ lớn hơn 50% so với cỡ chữ cơ sở được tính toán của phần tử mẹ. (Trước đây, chiều cao của chữ cái viết hoa "M"). |
| ex | Cần phải xác định xem nên sử dụng chiều cao x, chữ cái "x" hay.5em` trong cỡ chữ hiện tại đã tính toán của phần tử. |
| giới hạn | Chiều cao của chữ cái viết hoa trong cỡ chữ đã tính toán hiện tại của phần tử. |
| ch | Khoảng cách ký tự trung bình của một ký tự hẹp trong phông chữ của phần tử (được biểu thị bằng ký tự "0"). |
| ic | Khoảng cách ký tự trung bình của một ký tự có chiều rộng đầy đủ trong phông chữ của phần tử, được biểu thị bằng ký tự "水" (ký tự tượng hình nước CJK, U+6C34). |
| rem | Cỡ chữ của phần tử gốc (mặc định là 16px). |
| lh | Chiều cao dòng của phần tử. |
| rlh | Chiều cao dòng của phần tử gốc. |
Đơ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.
| đơn vị | so với |
|---|---|
| vw | 1% chiều rộng của khung nhìn. Mọi người sử dụng đơn vị này để thực hiện các thủ thuật phông chữ thú vị, chẳng hạn như đổi kích thước phông chữ tiêu đề dựa trên chiều rộng của trang để khi người dùng đổi kích thước, phông chữ cũng sẽ đổi kích thước. |
| vh | 1% chiều cao của khung nhìn. Bạn có thể sử dụng thuộc tính này để sắp xếp các mục trong giao diện người dùng, ví dụ: nếu bạn có thanh công cụ chân trang. |
| vi | 1% kích thước của khung nhìn trong trục nội tuyến của phần tử gốc. Trục (axis) đề cập đến các chế độ ghi. Trong các chế độ viết theo chiều ngang như tiếng Anh, trục nội tuyến sẽ nằm ngang. Ở chế độ viết dọc như một số kiểu chữ tiếng Nhật, trục cùng dòng chạy từ trên xuống dưới. |
| vb | 1% kích thước của khung nhìn trong trục khối của phần tử gốc. Đối với trục khối, đây sẽ là hướng của ngôn ngữ. Các ngôn ngữ LTR như tiếng Anh sẽ có trục khối dọc, vì trình đọc ngôn ngữ tiếng Anh phân tích cú pháp trang từ trên xuống dưới. Chế độ ghi dọc có trục khối ngang. |
| vmin | 1% kích thước nhỏ hơn của khung nhìn. |
| vmax | 1% kích thước lớn hơn của khung nhì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ỡ
Phương diện nào sau đây là hợp lệ?
Đơn vị tuyệt đối và đơn vị tương đối khác nhau như thế nào?
Đơn vị khung nhìn là tuyệt đối.