7 đơn vị CSS có thể bạn chưa biết
Khi làm việc với CSS, ai cũng muốn hoàn thành công việc nhanh và hiệu quả. Vì vậy, chúng ta luôn tìm hiểu các mẹo và thủ thuật hay giúp cho công việc thiết kế giao diện được dễ dàng hơn. Trong bài này, hãy cùng Bizfly Cloud tìm hiểu về các đơn vị đo lường thú vị trong CSS mà có thể bạn chưa biết.
"em" và "rem"
Khi nói tới kích thước font chữ (font-size), nhiều người quen thuộc với việc sử dụng đơn vị pixel (px). VD: font-size:16px.
Bản thân pixel là đơn vị cố định và sử dụng pixel không có gì sai. Tuy nhiên trong nhiều trường hợp, sử dụng đơn vị em thay vì px sẽ dễ dàng hơn và ít gây nhầm lẫn.
Vậy "em" là gì?
"em" là một đơn vị của thuộc tính font-size của các phần tử con. "em" có giá trị bằng đúng font-size của phần tử cha.
Ví dụ, khi bạn thiết lập font-size cho phần tử <body> là 16px, thì giá trị em của bất kỳ phần tử con nào trong <body> sẽ là 16px. Tức 1em=16px, 2em=32px, v.v.
<body>
<div class="test">Test</div>
</body>
body {
font-size: 16px;
}
div {
font-size: 1.2em; // ta tính được 1.2em = 16px * 1.2 = 19.2px
}
Ta có thể dễ dàng tính được <div> có kích thước font chữ là 19.2px. Vì font size của nó có giá trị bằng 1.2 lần (1.2em) font chữ của phần tử cha (body) của nó là 16px.
Tuy nhiên, điều gì sẽ xảy ra khi bạn lồng nhiều phần tử sử dụng em vào nhau? Hãy quan sát ví dụ dưới đây, ta lồng nhiều snippet vào với nhau với cùng giá trị 1.2em. Khi đó, mỗi <div> kế thừa font-size từ phần tử cha của nó, khiến cho font-size tăng dần.
HTML:
<body>
<div>
Test <!-- 14 * 1.2 = 16.8px -->
<div>
Test <!-- 16.8 * 1.2 = 20.16px -->
<div>
Test <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
CSS:
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
Như vậy, với 3 <div> lồng vào nhau và font-size gốc là 14px, ta có font-size của <div> sâu nhất là 24.192px. Tuy nhiên, trường hợp này khá hiếm xảy ra. Trong phần lớn trường hợp thì ta sẽ muốn giá trị font-size dựa vào một thước đo duy nhất. Khi đó, ta dùng rem.
Vậy rem là gì?
"r" trong rem là viết tắt của "root". Vì vậy rem sẽ có giá trị luôn bằng kích thước font của phần tử gốc (root), trong phần lớn trường hợp là phần tử html. Ví dụ:
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
Áp dụng vào trường hợp trên, tất cả các <div> sẽ có giá trị font-size là 16.8px.
Tại sao sử dụng em và rem?
Vì nó sẽ tương thích cho grids layout. Rem không chỉ được sử dụng để thay đổi kích thước của font. Ví dụ: bạn có thể sử dụng rem để thiết lập kích thước của cả hệ thống lưới (grid) và thư viện UI style dựa vào thuộc tính font-size của phần tử html root. Hoặc bạn cũng có thể sử dụng em để điều chỉnh lại kích thước font chữ của một số phần tử riêng lẻ. Điều này sẽ giúp bạn dễ dàng kiểm soát kích thước và tỉ lệ font chữ trên toàn trang web.
.container {
width: 70rem; // 70 * 14px = 980px
}
Lợi ích chính của việc này là giúp bạn dễ dàng mở rộng (scale up) trang web khi cần thiết. Tuy nhiên cần lưu ý là cách này không hẳn phù hợp với tất cả mọi tình huống.
vh và vw
Kỹ thuật thiết kế web responsive thường xuyên đòi hỏi sử dụng tỉ lệ phần trăm (%). Tuy nhiên, phần trăm trong CSS không phải là giải pháp tốt nhất cho mọi vấn đề.
Độ rộng (width) CSS bị ảnh hưởng bởi phần tử cha gần nó nhất. Vậy điều gì sẽ xảy ra nếu bạn muốn sử dụng chiều rộng hoặc chiều cao của khung nhìn thay vì chiều rộng của phần tử cha? Đó chính xác là lúc bạn cần sử dụng vh và vw.
Phần tử vh có giá trị đúng bằng 1/100 chiều cao của khung nhìn (viewport height). Ví dụ, nếu browser có chiều cao là 900px thì 1vh có giá trị bằng 9px. Tương tự, nếu chiều rộng của khung nhìn (viewport width) là 750px, thì 1vw bằng 7.5px.
Có nhiều cách sử dụng đơn vị này. Một ví dụ đơn giản là bạn có thể khiến cho các slide có chiều cao bằng trình duyệt (full height) chỉ với một thiết lập CSS đơn giản:
.slide {
height: 100vh;
}
Một ví dụ khác, khi bạn muốn tiêu đề lấp đầy chiều rộng của trình duyệt, bạn có thể thiết lập font-size: 100vw.
vmin và vmax
Trong khi vh và vw luôn gắn liền với chiều rộng và cao của trình duyệt, thì vmin và vmax liên quan tới giá trị lớn nhất và nhỏ nhất trong 2 giá trị: chiều rộng và chiều cao, tùy thuộc vào độ tương quan giữa chúng.
Ví dụ, nếu trình duyệt rộng 1100px và cao 700px, 1vmin sẽ có giá trị là 7px và 1vmax có giá trị là 11px. Tuy nhiên, nếu chiều rộng là 800px trong khi cao là 1080px, thì vmin sẽ tương ứng với 8px trong khi vmax là 10.8px.
Khi nào cần dùng vmin và vmax?
Giả sử bạn cần một phần tử luôn có thể hiển thị được trên màn hình, thì sử dụng vmin với giá trị nhỏ hơn 100 sẽ làm được điều đó. Ví dụ, một hình vuông luôn chạm vào ít nhất 2 cạnh của màn hình có thể được style như sau:
.box {
height: 100vmin;
width: 100vmin;
}
Nếu bạn cần một hình vuông luôn bao phủ góc nhìn (chạm cả 4 cạnh của màn hình), bạn có thể sử dụng vmax:
.box {
height: 100vmax;
width: 100vmax;
}
Việc sử dụng thành thạo 2 giá trị trên sẽ cho phép bạn linh hoạt điều chỉnh kích thước của các phần tử trên trang dựa theo kích thước trình duyệt và vẫn đảm bảo responsive.
ex và ch
Tương tự như em và rem, các đơn vị ex và ch cũng dựa vào font-size hiện tại. Tuy nhiên, điểm khác biệt là ex và ch còn bị ảnh hưởng bởi từng font-family riêng biệt.
Đơn vị ch, hay character, được định nghĩa là một "thước đo nâng cao" với chiều rộng bằng với ký tự zero, hay 0. Về cơ bản thì nếu sử dụng font monospace, một box với ký tự N (ví dụ width: 40ch) sẽ luôn chứa một chuỗi với 40 ký tự trong font đó.
Trước đây, quy tắc đặc biệt này thường được sử dụng để thiết kế bố cục chữ nổi (braille), tuy nhiên còn nhiều ứng dụng khác mà các bạn sẽ khám phá ra trong quá trình sáng tạo. Tham khảo thêm về ch tại blog của Eric Meyer.
Đơn vị ex được định nghĩa là "x-height của font hiện tại HOẶC một nửa của một em". x-height của một font là chiều cao của chữ x viết thường trong font đó.
Có rất nhiều cách sử dụng với đơn vị này, phần lớn là để thực hiện các điều chỉnh nhỏ trong typography. Ví dụ, phần tử sub (superscript) có thể được đẩy lên trên hàng sử dụng tương quan vị trí và giá trị bottom là 1ex. Tương tự bạn có thể đẩy subscript xuống dưới cũng với cách làm đó. Mặc định của trình duyệt cho superscript và subscript là sử dụng quy tắc vertical-align, nhưng bạn có thể tùy chỉnh theo ý thích ví dụ như sau:
sup {
position: relative;
bottom: 1ex;
}
sub {
position: relative;
bottom: -1ex;
}
Tham khảo: webdisgn.tutsplus.com
>> Có thể bạn quan tâm:
