- Trang chủ
- Tham khảo
- CSS
- Đơn vị trong HTML & CSS
Đơn vị trong HTML & CSS
| Đơn vị | Mô tả |
|---|
| %
| Phần trăm
| | cm
| centimeter
| | in
| inch(1 inch = 2.54 cm)
| | mm
| millimeter
| | em
| 1em ngang bằng với kích cỡ font hiện hành, 2em = 2 lần kích cỡ font hiện hành. vd: một thành phần được thiết lập font là 12pt, vậy 2em bằng với 24pt, ’em‘ là đơn vị rất hữu dụng trong css, nhất là trong trường hợp người dùng sử dụng zoom để phóng to chữ trong trình duyệt, đơn vị em sẽ giãn ra theo tỉ lệ chữ. Nếu có nhiều tag lồng nhau, thì phần tử con khi sử dụng em sẽ chịu ảnh hưởng của phần tử cha kết tiếp.
| | rem
| Tương tự như đơn vị em tuy nhiên phần tử con sử dụng sẽ không chịu ảnh hưởng của phần tử cha kế tiếp, mà chịu ảnh hưởng của phần tử cha đầu tiên (root).
| | ex
| 1ex bằng chiều cao của chữ x in thường của font hiện hành.
Do đó, đơn vị này không những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14ex nhưng chiều cao các chữ của các loại font là khác nhau.
| | pt
| point (1pt = 1/72inch)
| | pc
| pica (1pc = 12pt)
| | px
| Pixels (điểm ảnh trên màn hình máy tính)
| | vh
| 1vh sẽ bằng 1% chiều cao của màn hình hiển thị, ví dụ chiều cao trình duyệt hiển thị là 1000px, thì 1vh = 10px.
| | vw
| 1vw sẽ bằng 1% chiều rộng của màn hình hiển thị, ví dụ chiều rộng trình duyệt hiển thị là 1024px, thì vw = 10.24px.
| | vmin
| 1% màn hình tối thiểu, ví dụ trình duyệt hiển thị 1024x960, thì 1vmin = 9.6px.
| | vmax
| 1% màn hình tối đa, ví dụ trình duyệt hiển thị 1024x960, thì 1vmax = 10.24px.
| | calc()
| Đây là tính toán đơn vị, ví dụ: calc(100% - 20px), cách sử dụng này rất tiện lợi trong việc chỉnh responsive.
|
Chúng ta thường sử dụng các đơn vị sau để code:
%: thường được dùng để định dạng phần trăm cho chiều rộng hay khoảng cách, hoặc font size.
em: thường được dùng cho những nội dung có khả năng co giản khi zoom text.
px: thường được dùng để định dạng khoảng cách, chiều rộng, chiều cao,... Chắc các bạn đã rất quen thuộc với những đơn vị tính như px, pt để đặt kích thước cho các phần tử trên giao diện website như width, height, margin, padding, ... Vậy cụ thể về các đơn vị tính trong CSS như thế nào, các bạn cùng mình tìm hiểu trong bài viết này nhé. Trong CSS có những đơn vị tính nào?Theo những tìm hiểu của mình và trong quá trình làm việc thực tế ở các dự án thì có các đơn vị tính trong CSS: px, pt, in, pc, mm,
cm, em, ex, ch, rem, vw, vh, vmin, vmax, %... Quy định về đơn vị trong CSS:- Giá trị số rồi đến đơn vị, VD: 10px, 2em, 50%, ...
- Tuyệt đối không có dấu cách giữa số và đơn vị tính.
- Nếu giá trị số là 0, có thể bỏ qua đơn vị tính.
- Một số đơn vị cho phép sử dụng số âm. VD: padding-top:-20px; margin-top: -20%; Nhưng phần lớn các đơn vị khác là số dương.
Trong khuân khổ bài chia sẻ này mình sẽ
cùng các bạn tìm hiểu những đơn vị tính thường sử dụng trong CSS. Mặc dù sẽ không đề cập hết nhưng không có nghĩa là những đơn vị đó sẽ không được sử dụng, các bạn nên tìm hiểu qua để biết và lựa chọn đơn vị tính phù hợp. Trong CSS có hai loại đơn vị là Đơn vị tương đối (Relative Units) và Đơn vị tuyệt đối (Absolute Units). Trong đó: 1. Đơn vị tương đối - Relative UnitsĐơn vị tương đối là đơn
vị được tính một cách tương đối so với phần tử mẹ hoặc các phần tử khác. Đơn vị tương đối cơ động và hoạt động tốt hơn cho những thiết bị, những màn hình có kích thước và độ phân giải khác nhau. Một số đơn vị tương đối chính được sử dụng trong CSS:- % (percentages): Đơn vị tương đối về kích thước của phần tử con so với phần tử mẹ (parrent). Ví dụ: Nếu phần tử mẹ có thuộc tính width:500px, phần tử con có thuộc tính width:50% thì có nghĩa là phần tử con
có thuộc tính width:250px
- em: Là đơn vị tương đối dựa vào thuộc tính font-size của phần tử mẹ. Ví dụ: Nếu phần tử mẹ có thuộc tính font-size:16px, phần tử con có thuộc tính font-size:2em thì có nghĩa là phần tử con có thuộc tính font-size:32px
- rem(root em): Là đơn vị tương đối dựa vào thuộc tính
font-size của phần html (root element). Ví dụ: Nếu phần tử html có thuộc tính font-size:12px phần tử mẹ có thuộc tính font-size:16px, phần tử con có thuộc tính font-size:2rem thì có nghĩa là phần tử con có thuộc tính font-size:24px; Tức là đơn vị rem không phụ thuộc vào phần tử mẹ.
2. Đơn vị tuyệt đối - Absolute UnitsKhác với đơn vị tương đối, như tên gọi, đơn vị tuyệt đối sẽ có những giá trị cố định không thay đổi. Đơn vị tuyệt đối không được khuyến
khích sử dụng cho màn hình, vì có rất nhiều các kích thước màn hình khác nhau. Nó chỉ nên dùng cho những trường hợp biết chắc kích thước của giao diện, như xuất ra máy in chẳng hạn. Một số đơn vị tuyệt đối được sử dụng trong CSS:- px *: pixels (1px = 1/96th of 1in)
- pt: points (1pt = 1/72 of 1in)
- pc: picas (1pc = 12 pt)
- cm: centimeters
- mm: millimeters
- in: inches (1in = 96px = 2.54cm)
* Pixels (px) là khác nhau giữa các thiết bị. Với các thiết bị có độ phân giải thấp (low-dpi devices), 1px là một chấm điểm hiển thị trên màn hình của thiết bị. Với máy in và các thiết bị có độ phân giải cao, 1px lại là nhiều chấm điểm hiển thị trên màn hình của thiết bị. 3. Kết luậnMặc dù có khá nhiều đơn vị khác nhau trong CSS, nhưng các đơn vị phổ biến
và nên dùng chỉ đơn giản là px, %, em và rem. Với đơn vị pt cũng như các đơn vị khác, lời khuyên của mình là không nên dùng và không cần quá quan tâm cho đau đầu! Trong thiết kế web Responsive để tương thích với nhiều kích thước màn hình và nhiều độ phân giải khác nhau, bạn nên sử dụng triệt để các đơn vị tương đối như %, em và rem. Chúc bạn thành công! * Để chuyển đổi đơn vị từ px sang em, bạn có thể sử dụng công cụ online đơn giản tại
link này. Giá trị font size mặc định thường là 16px. |
