Cafedev chia sẻ cho ace tất các các đơn vị trong css để chúng ta dùng khi thiết kế UI cho web, canh chỉnh chiều cao, layout cho web..
Nội dung chính
1. Đơn vị trong CSS
CSS có một số đơn vị khác nhau để thể hiện độ dài.
Nhiều thuộc tính CSS nhận các giá trị “chiều dài”, chẳng hạn như width, margin, padding, font-size,v.v.
Độ dài là một số theo sau là đơn vị độ dài, chẳng hạn như 10px, 2em, v.v.
Khoảng trắng không thể xuất hiện giữa số và đơn vị. Tuy nhiên, nếu giá trị là 0, đơn vị có thể được bỏ qua.
Đối với một số thuộc tính CSS, độ dài âm được phép.
Có hai loại đơn vị độ dài: tuyệt đối(absolute) và tương đối(relative).
2. Độ dài tuyệt đối – Absolute Lengths
Các đơn vị độ dài tuyệt đối là cố định và độ dài được biểu thị bằng bất kỳ đơn vị nào trong số này sẽ xuất hiện chính xác như kích thước đó.
Đơn vị độ dài tuyệt đối không được khuyến khích sử dụng trên màn hình, vì kích thước màn hình thay đổi rất nhiều. Tuy nhiên, chúng có thể được sử dụng nếu phương tiện đầu ra được biết, chẳng hạn như cho bố cục in.
| Unit(đơn vị) | Mô tả |
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
- Điểm ảnh (px) có liên quan đến thiết bị xem. Đối với các thiết bị dpi thấp, 1px là một pixel thiết bị (chấm) của màn hình. Đối với máy in và màn hình có độ phân giải cao, 1px ngụ ý nhiều pixel thiết bị.
3. Độ dài tương đối – Relative Lengths
Đơn vị độ dài tương đối chỉ định độ dài liên quan đến thuộc tính độ dài khác. Các đơn vị độ dài tương đối chia tỷ lệ tốt hơn giữa các phương tiện kết xuất khác nhau.
| Unit | Mô tả | |
| em | Liên quan đến kích thước phông chữ của phần tử (2em có nghĩa là 2 lần kích thước của phông chữ hiện tại) | |
| ex | Liên quan đến chiều cao x của phông chữ hiện tại (hiếm khi được sử dụng) | |
| ch | Tương đối với chiều rộng của “0” (không) | |
| rem | Liên quan đến kích thước phông chữ của phần tử gốc | |
| vw | Tương đối với 1% chiều rộng của viewport * | |
| vh | Tương đối với 1% chiều cao của viewport * | |
| vmin | Tương đối với 1% kích thước nhỏ hơn của viewport * | |
| vmax. | Tương đối với 1% kích thước lớn hơn của viewport * | |
| % | Liên quan đến phần tử cha |
Mẹo: Các đơn vị em và rem rất thiết thực trong việc tạo bố cục có thể mở rộng hoàn hảo! *Viewport = kích thước cửa sổ trình duyệt. Nếu khung nhìn rộng 50cm, 1vw = 0,5cm.
4. Hỗ trợ trình duyệt
| Length Unit | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | Not supported | 19.0 | 7.0 | 20.0 |
Lưu ý: Internet Explorer 9 hỗ trợ vmin với tên không chuẩn: vm.
Full series tự học CSS từ cơ bản tới nâng cao.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
