CSS - Đơn vị đo lường

Xin chào các nhà thiết kế web tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị qua thế giới của các đơn vị đo lường trong CSS. Là giáo viên máy tính gần gũi của bạn, tôi sẽ hướng dẫn bạn qua khía cạnh quan trọng này của thiết kế web. Vậy, hãy cầm lấy thước đo ảo của bạn, và chúng ta cùng bắt đầu đo đạc trong CSS nhé!

Đơn vị đo lường

Trong CSS, chúng ta có nhiều cách để đo và xác định kích thước. Điều này giống như có một bộ công cụ đầy đủ các thước đo, mỗi cái phù hợp cho một nhiệm vụ cụ thể. Hãy bắt đầu với những điều cơ bản:

Đơn vị đo lường tuyệt đối

Đây là những đơn vị đơn giản, giống như các inch trên thước của bạn:

Đơn vị	Mô tả
px	Pixel
in	Inch
cm	Centimeter
mm	Millimeter
pt	Point
pc	Pica

Dưới đây là một ví dụ đơn giản:

.box {
width: 100px;
height: 2in;
margin: 10mm;
}

Trong đoạn mã này, chúng ta đang tạo một hộp rộng 100 pixel, cao 2 inch, với margin 10 millimeter xung quanh. Điều này giống như xây dựng một hộp giấy nhỏ và chính xác!

Đơn vị đo lường em

Bây giờ, hãy nói về đơn vị 'em'. Đây là một đơn vị tương đối, dựa trên kích thước字体 của phần tử. Hãy tưởng tượng nó như một con kỳ đà变色龙, thay đổi kích thước dựa trên môi trường xung quanh.

.parent {
font-size: 16px;
}

.child {
font-size: 1.5em; /* Điều này sẽ là 24px */
padding: 2em;     /* Điều này sẽ là 48px */
}

Trong ví dụ này, kích thước字体 của con là 1.5 lần của cha, và padding là gấp đôi kích thước字体 của nó. Điều này giống như một bộ dolls Nga của kích thước!

Đơn vị đo lường ch

Đơn vị 'ch' dựa trên chiều rộng của ký tự '0' (số không). Nó đặc biệt hữu ích cho việc tạo các bố cục cột trong fonts chữ fixed-width.

.code-block {
width: 80ch;
font-family: monospace;
}

Điều này tạo ra một khối mã rộng 80 ký tự, hoàn hảo cho những ai hoài niệm về những ngày của các terminal 80 cột!

Đơn vị đo lường rem

'rem' có nghĩa là "root em". Nó tương tự như 'em', nhưng luôn tương đối với phần tử gốc (thường là

), không phải cha.

html {
font-size: 16px;
}

.box {
font-size: 1.5rem; /* Luôn là 24px, không phụ thuộc vào cha */
padding: 2rem;     /* Luôn là 32px */
}

Điều này rất tốt cho việc duy trì kích thước nhất quán suốt tài liệu của bạn, giống như có một bản đồ chính cho toàn bộ trang web của bạn.

Đơn vị đo lường lh và rlh

'lh' có nghĩa là "chiều cao dòng" của phần tử, trong khi 'rlh' là "chiều cao dòng gốc". Đây là các đơn vị mới, hoàn hảo cho nhịp điệu dọc trong typography.

.paragraph {
line-height: 1.5;
margin-bottom: 1lh;
}

Điều này đặt margin dưỡ của đoạn văn chính xác một chiều cao dòng, tạo ra một nhịp điệu dọc hài hòa. Điều này giống như chỉ huy một dàn nhạc của văn bản!

Đơn vị đo lường vh và vw

'vh' và 'vw' lần lượt có nghĩa là "chiều cao viewport" và "chiều rộng viewport". Chúng là các đơn vị phần trăm dựa trên kích thước của viewport.

.hero {
height: 100vh;
width: 100vw;
}

Điều này tạo ra một phần hero luôn chiếm đầy toàn bộ màn hình, không matter kích thước thiết bị. Điều này giống như có một billboard responsive luôn phù hợp hoàn hảo!

Đơn vị đo lường vmin và vmax

Các đơn vị này dựa trên kích thước nhỏ hơn hoặc lớn hơn của viewport, tùy thuộc vào điều kiện phù hợp.

.square {
width: 50vmin;
height: 50vmin;
}

Điều này tạo ra một hình vuông luôn bằng một nửa kích thước nhỏ hơn của viewport. Điều này giống như có một hình vuông thay đổi hình dạng luôn giữ tỷ lệ!

Đơn vị đo lường vb

'vb' có nghĩa là "viewport block size". Nó tương tự như 'vh', nhưng nó tuân theo chế độ viết của tài liệu.

.sidebar {
width: 20vb;
}

Điều này tạo ra một cột bên luôn bằng 20% kích thước block của viewport, điều này rất tốt cho các trang web đa ngôn ngữ với các hướng viết khác nhau.

Đơn vị đo lường vi

'vi' là "viewport inline size". Nó giống như 'vw', nhưng một lần nữa, nó tuân theo chế độ viết.

.header {
height: 10vi;
}

Điều này tạo ra một tiêu đề luôn bằng 10% kích thước inline của viewport, adapt để các chế độ viết khác nhau mượt mà.

Ví dụ - Phần trăm

Phần trăm trong CSS luôn tương đối với một điều gì đó. Hãy xem chúng trong hành động:

.container {
width: 80%;
margin: 0 auto;
}

.child {
width: 50%;
padding: 5%;
}

Ở đây, container chiếm 80% chiều rộng của cha, được căn giữa với margin auto. Con chiếm một nửa chiều rộng của container, với padding bằng 5% chiều rộng của container. Điều này giống như dolls Nga, nhưng với các hộp vô hình!

Ví dụ - Số liệu

Đôi khi, các thuộc tính CSS không cần đơn vị chút nào. Hãy xem một số ví dụ:

.box {
opacity: 0.5;
line-height: 1.5;
z-index: 100;
}

Ở đây, opacity là giá trị giữa 0 và 1, line-height là một乗 số của kích thước字体, và z-index chỉ là một số nguyên cho thứ tự stacking. Điều này giống như có một nút âm lượng, một khe cách văn bản, và một bộ phân loại layer tất cả trong một!

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của các đơn vị đo lường trong CSS, từ các pixel quen thuộc đến các đơn vị viewport kỳ lạ. Nhớ rằng, việc chọn đúng đơn vị giống như việc chọn đúng công cụ cho công việc - nó có thể làm cuộc sống của bạn dễ dàng hơn và thiết kế của bạn trở nên vững chắc hơn. Vậy, hãy đi tiếp và đo lường một cách có trách nhiệm!

Credits: Image by storyset