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.
Đơn vị | Tên | Tương đương với |
---|---|---|
cm | Centimét | 1 cm = 96 px/2,54 |
mm | Milimét | 1 mm = 1/10 của 1 cm |
Hỏi | 1/4 milimét | 1Q = 1/40 của 1cm |
ở | Inch | 1in = 2.54cm = 96px |
pc | Đi dã ngoại | 1 cái = 1/6th của 1in |
điểm | Điểm | 1pt = 1/72 của 1in |
pixel | Pixel | 1px = 1/96 của 1in |
Độ 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ị | liên quan đến: |
---|---|
em | So với kích thước phông chữ, tức là 1,5em sẽ lớn hơn 50% so với kích thước phông chữ tính toán cơ bản của thành phần mẹ. (Trước đây, chiều cao của chữ "M" viết hoa"). |
ví dụ: | Sử dụng chiều cao x chiều cao, chữ cái "x" hay "5em" trong cỡ chữ đã tính toán hiện tại của phần tử. |
viết hoa | Chiều cao của chữ viết hoa trong kích thước phông chữ đã tính toán hiện tại của phần tử. |
ch | Mức tăng 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 | Mức tăng 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ự "水" (chữ tượng hình nước CJK, U+6C34). |
rem | Cỡ chữ của thành phần 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 đố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.
đơn vị | có liên quan đến |
---|---|
vw | 1% chiều rộng của khung nhìn. Mọi người 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 để người dùng đổi kích thước, thì 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 tính năng này để sắp xếp các mục trong giao diện người dùng, chẳng hạn như nếu bạn có thanh công cụ ở phần chân trang. |
vi | 1% kích thước của khung nhìn trong Trục cùng dòng của phần tử gốc. Trục đề cập đến chế độ ghi. Ở các chế độ viết theo chiều ngang như tiếng Anh, trục cùng dòng sẽ nằm ngang. Ở các 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 dọc, vì trình đọc tiếng Anh phân tích cú pháp trang từ trên xuống dưới. Chế độ viết dọc có một trục khối nằm ngang. |
vmin | 1% kích thước nhỏ hơn của khung nhìn. |
Chiến dịch Tối đa hoá hiệu suất | 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ẽ 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
Đâu là phương diện hợp lệ?
Đơn vị tuyệt đối và đơn vị tương đối khác nhau như thế nào?
Các đơn vị khung nhìn là tuyệt đối.