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é. Show 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: Quy định về đơn vị trong CSS:
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:
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:
* 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ừ
Đã đăng vào thg 2 13, 2019 12:44 SA 2 phút đọc Giới thiệuTrong CSS có hỗ trợ cho chúng ta rất nhiều các đơn vị đo độ dài để áp dụng vào trong các thuộc tính cần đến nó như: width, height, margin, ...
Các đơn vị đoĐơn vị đo tương đối.
em: 1em = với kích cỡ của font hiện tại (font-size). Tương tự ta có 2em= 2 lần font,... ex: 1ex = với chiều cao của 1 chữ x (in thường) của font hiện tại ch: 1ch = chiều rộng của số 0 rem: giá trị tương đối với font của thành phần gốc vw: 1vw = 1% của chiều rộng cửa sổ khung hình vh: 1vh = 1% của chiều cao cửa sổ khung hình vmin: 1vmin = 1% của khung nhìn nhỏ nhất vmax: 1vmax = 1% của khung nhìn nhỏ nhất %: Xác định một đơn vị đo theo phần trăm liên quan đến một giá trị khác, thường là một phần tử bao quanh. Đơn vị đo tuyệt đối.
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) Trình duyệt hỗ trợ.Tổng kết:
All rights reserved |
