CSS - Đơn vị đo lường: Hướng dẫn cho người mới bắt đầu
Xin chào các pháp sư CSS tương lai! ? Chào mừng các bạn đến với hành trình kỳ diệu vào thế giới của các đơn vị đo lường trong CSS. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi rất vui mừng được hướng dẫn các bạn qua khía cạnh quan trọng này của thiết kế web. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ đầu và cùng nhau xây dựng kiến thức!
Đơn vị chiều dài: nền tảng của các đo lường CSS
Hãy bắt đầu với những điều cơ bản. Trong CSS, chúng ta sử dụng nhiều đơn vị khác nhau để chỉ định kích thước của các yếu tố, margin, padding và nhiều hơn nữa. Hãy tưởng tượng các đơn vị này như những thước đo và dây đo của thế giới kỹ thuật số. Chúng giúp chúng ta tạo ra các trang web trông tuyệt vời trên tất cả các thiết bị, từ điện thoại nhỏ đến màn hình máy tính lớn.
Dưới đây là bảng các đơn vị chiều dài CSS phổ biến nhất:
| Đơn vị | Mô tả | Ví dụ |
|---|---|---|
| px | Pixels | 16px |
| em | Tương đối với kích thước字体 của yếu tố | 1.5em |
| rem | Tương đối với kích thước字体 của phần tử gốc | 2rem |
| % | Phần trăm | 50% |
| vw | Chiều rộng viewport | 100vw |
| vh | Chiều cao viewport | 50vh |
Bây giờ, hãy cùng tìm hiểu sâu hơn về từng đơn vị này và xem chúng hoạt động như thế nào!
Đơn vị đo lường CSS - Đơn vị em
Đơn vị 'em' giống như một con báo chameleon - nó thay đổi theo môi trường xung quanh. Một 'em' bằng kích thước字体 của phần tử hiện tại. Điều này làm cho nó rất hữu ích cho việc tạo ra các thiết kế có thể mở rộng.
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* Đây sẽ là 24px */
margin-bottom: 1em; /* Đây cũng sẽ là 24px */
}Trong ví dụ này, kích thước字体 của phần tử .child sẽ là 24px (1.5 * 16px), và margin-bottom của nó cũng sẽ là 24px. Như thể .child đang nói, "Tôi muốn lớn gấp 1.5 lần so với cha của mình!"
Đơn vị đo lường CSS - Đơn vị ch
Đơn vị 'ch' là một chút chuyên gia về typography. Nó dựa trên chiều rộng của ký tự '0' trong字体 hiện tại. Điều này có thể rất hữu ích cho việc tạo ra các bố cục nhất quán, đặc biệt là với các字体 không có khoảng cách.
.code-snippet {
font-family: 'Courier New', monospace;
width: 40ch; /* Chiều rộng của 40 ký tự '0' */
}Điều này sẽ tạo ra một hộp có độ rộng chính xác 40 ký tự - perfect cho việc hiển thị các đoạn mã!
Đơn vị đo lường CSS - Đơn vị rem
Đơn vị 'rem' giống như người长辈 thông thái trong gia đình CSS. Nó luôn tham chiếu đến kích thước字体 của phần tử gốc (thường là thẻ <html>), bỏ qua bất kỳ kích thước字体 của phần tử cha nào.
html {
font-size: 16px;
}
.container {
font-size: 20px;
}
.container p {
font-size: 1.5rem; /* Đây sẽ là 24px, dựa trên kích thước字体 của html */
}Trong trường hợp này, mặc dù .container có kích thước字体 khác, đoạn văn trong nó vẫn sẽ là 24px (1.5 * 16px từ phần tử gốc).
Đơn vị đo lường CSS - Đơn vị lh và rlh
Đơn vị 'lh' dựa trên chiều cao dòng của một phần tử, trong khi 'rlh' dựa trên chiều cao dòng của phần tử gốc. Đây là những đơn vị mới và rất tốt cho việc tạo ra nhịp điệu dọc trong thiết kế của bạn.
.paragraph {
font-size: 16px;
line-height: 1.5;
margin-bottom: 1lh; /* Đây sẽ bằng chiều cao dòng */
}Điều này tạo ra một khoảng cách nhất quán giữa các đoạn văn dựa trên chiều cao dòng.
Đơn vị đo lường CSS - Đơn vị vh và vw
Bây giờ chúng ta đang bước vào các đơn vị viewport - những đơn vị yêu thích cá nhân của tôi! 'vh' có nghĩa là chiều cao viewport, và 'vw' có nghĩa là chiều rộng viewport. Chúng là phần trăm của kích thước viewport tổng thể.
.hero-section {
height: 100vh; /* Full height của viewport */
width: 100vw; /* Full width của viewport */
}
.half-width {
width: 50vw; /* Nửa width của viewport */
}Những đơn vị này tuyệt vời cho việc tạo ra các thiết kế响应 ứng mà adapt với bất kỳ kích thước màn hình nào. Tôi từng sử dụng chúng để tạo một trang landing fullscreen trông tuyệt vời trên mọi thứ, từ điện thoại đến màn hình TV lớn!
Đơn vị đo lường CSS - Đơn vị vmin và vmax
'vmin' và 'vmax' là đôi bạn động của các đơn vị viewport. 'vmin' sử dụng kích thước nhỏ hơn của viewport, trong khi 'vmax' sử dụng kích thước lớn hơn.
.square {
width: 50vmin;
height: 50vmin;
}Điều này tạo ra một hình vuông luôn là 50% của kích thước nhỏ hơn của viewport - perfect cho việc duy trì tỷ lệ khung hình!
Đơn vị đo lường CSS - Đơn vị vb
Đơn vị 'vb' dựa trên kích thước của viewport trong hướng block (thường là chiều cao trong các chế độ viết ngang). Nó tương tự như 'vh' nhưng adapt với các chế độ viết khác nhau.
.vertical-text {
writing-mode: vertical-rl;
height: 100vb; /* Full height trong chế độ viết dọc */
}Điều này đặc biệt hữu ích cho việc tạo ra các bố cục hoạt động tốt trong cả hai hệ thống viết ngang và dọc.
Đơn vị đo lường CSS - Đơn vị vi
Đơn vị 'vi' là phiên bản inline của 'vb'. Nó dựa trên kích thước của viewport trong hướng inline (thường là chiều rộng trong các chế độ viết ngang).
.horizontal-scroll {
width: 200vi; /* Gấp đôi width của viewport */
overflow-x: scroll;
}Điều này tạo ra một phần tử cuộn ngang luôn gấp đôi width của viewport.
Ví dụ - Phần trăm
Phần trăm trong CSS luôn tương đối với điều gì đó. Đối với width, chúng thường tương đối với width của phần tử cha.
.parent {
width: 300px;
}
.child {
width: 50%; /* Đây sẽ là 150px */
}Ở đây, phần tử .child sẽ luôn là nửa width của phần tử cha. Như thể bạn đang nói với phần tử của mình, "Bạn có thể có nửa phần của cha bạn!"
Ví dụ - Số liệu
Đôi khi, bạn sẽ thấy các thuộc tính CSS với không có đơn vị - chỉ có số liệu. Những số liệu này thường được sử dụng cho các thuộc tính không có đơn vị như line-height hoặc opacity.
p {
line-height: 1.5; /* 1.5 lần kích thước字体 */
opacity: 0.8; /* 80% mờ */
}Trong trường hợp này, line height sẽ là 1.5 lần kích thước字体, tạo ra văn bản có khoảng cách đẹp, và opacity sẽ làm văn bản hơi trong suốt.
Và đó là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của các đơn vị đo lường CSS. Nhớ rằng, chìa khóa để thành thạo chúng là thực hành. Hãy thử kết hợp các đơn vị này trong các dự án của bạn, và bạn sẽ很快 phát triển trực giác về khi nào nên sử dụng từng đơn vị.
Chúc các bạn may mắn trong việc mã hóa, và hy vọng các bố cục của bạn luôn hoàn hảo! ?✨
Credits: Image by storyset