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.
Đơn vị | Tên | Tương đương với |
---|---|---|
cm | Centimét | 1 cm = 96 px/2,54 |
mm | Milimét | 1mm = 1/10 của 1 cm |
Hỏi | 14 milimet | 1Q = 1/40 của 1 cm |
trong | Inch | 1 inch = 2,54 cm = 96 px |
máy tính | Dã ngoại | 1pc = 1/6 của 1 inch |
điểm | Điểm | 1pt = 1/72 của 1in |
pixel | Pixel | 1px = 1/96 của 1 inch |
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ị | 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ữ được tính toán cơ bản của cha mẹ. (Trước đây, chiều cao của chữ cái viết hoa "M"). |
ví dụ: | Nhanh chóng xác định xem có nên sử dụng chiều cao x, một chữ cái "x" hoặc.5em` theo cỡ chữ hiện tại theo tính toán của phần tử. |
chữ hoa | Chiều cao của chữ cái viết hoa trong cỡ chữ hiện tại theo tính toán của phần tử. |
ch | Tốc độ ký tự trung bình 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 | Trung bình phần mở rộng về ký tự của một ký tự có độ rộng đầy đủ trong phông chữ của phần tử, được biểu thị bằng chữ "水" Chữ tượng hình (U+6C34) nước CJK. |
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ị 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.
đơ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 để tạo 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 độ rộng của trang để người dùng cũ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 tính năng này để sắp xếp các mục trong giao diện người dùng, nếu bạn có thanh công cụ chân trang chẳng hạn. |
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 đề cập đến các chế độ ghi. Ở chế độ viết ngang như tiếng Anh, trục nội tuyến là trục hoành. Ở 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 tung, 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. |
tối thiểu | 1% kích thước nhỏ hơn của khung nhìn. |
vmax | 1% kích thước lớn của khung nhì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
Mục nào sau đây là phương diện hợp lệ?
Đơn vị tuyệt đối và tương đối khác nhau như thế nào?
Đơn vị khung nhìn là tuyệt đối.