- Tham gia
- 28/02/2015
- Bài viết
- 17,142
- Được Like
- 12,745
Tìm hiểu về các đơn vị đo lường cơ bản px, pt, percentages, em và rem
Mặc dù có lẽ mình sẽ cần nói qua hơi nhiều các khái niệm cơ bản trước khi bắt đầu với việc tìm hiểu các thuộc tính CSS. Dù mất thời gian hơn nhưng nó sẽ giúp bạn đỡ bối rối về sau này khi gặp những khái niệm đó.
Một trong các khái niệm thường gặp nhất là hiểu đơn vị đo lường được sử dụng khi viết CSS, mặc dù có nhiều loại đơn vị nhưng bạn có thể chỉ cần sử dụng một loại đơn vị khi làm website, hoặc là hai chứ không bắt buộc là dùng hết. Nhưng nếu bạn hiểu rõ về nó thì bạn sẽ dễ dàng hơn trong việc tính toán đo lường các phần tử trong website.
Tham khảo: Giải thích ý nghĩa các đơn vị tại Mozilla Developers Network
Về đơn vị, thì trong CSS có hai loại đơn vị là Absolute Units (đơn vị tuyệt đối) và Relative Units (đơn vị tương đối). Trong đó:
Đơn vị tuyệt đối
Là các đơn vị vật lý đã được định nghĩa sẵn và đại diện cho các đơn vị đo lường vật lý. Các đơn vị này không bị phụ thuộc và không hề thay đổi bởi bất cứ tác động nào. Ví dụ như đơn vị mét, xen-ti-mét,..là các đơn vị tuyệt đối.
Các đơn vị tuyệt đối sử dụng trong CSS gồm có:
HTML:
CSS:
Kết quả:
Đơn vị tương đối
Là các đơn vị đo lường được sử dụng trong CSS ở mức tương đối, nghĩa là nó có thể sẽ được thay đổi bởi các thành phần khác ví dụ như thay đổi phụ thuộc vào kích thước màn hình.
Các đơn vị tương đối được sử dụng trong CSS gồm có:
HTML:
CSS:
Kết quả:
Ví dụ về đơn vị em
HTML:
CSS:
Kết quả:
Còn đơn vị rem thì cũng y hệt như em thôi, chỉ có điều là nó phụ thuộc vào font-size của phần tử <html>.
Lời kết
Bây giờ bạn đã hiểu ý nghĩa của từng đơn vị chưa nào? Thực ra trên tất cả các đơn vị trên thì bạn nên sử dụng đơn vị px cho dễ nếu bạn mới bắt đầu học CSS hoặc làm giao diện website đơn giản, còn các đơn vị khác bạn sẽ có dịp sử dụng khi đã có kinh nghiệm sử dụng CSS để làm các giao diện phức tạp hơn.
Chúc các bạn thành công.
Mặc dù có lẽ mình sẽ cần nói qua hơi nhiều các khái niệm cơ bản trước khi bắt đầu với việc tìm hiểu các thuộc tính CSS. Dù mất thời gian hơn nhưng nó sẽ giúp bạn đỡ bối rối về sau này khi gặp những khái niệm đó.
Một trong các khái niệm thường gặp nhất là hiểu đơn vị đo lường được sử dụng khi viết CSS, mặc dù có nhiều loại đơn vị nhưng bạn có thể chỉ cần sử dụng một loại đơn vị khi làm website, hoặc là hai chứ không bắt buộc là dùng hết. Nhưng nếu bạn hiểu rõ về nó thì bạn sẽ dễ dàng hơn trong việc tính toán đo lường các phần tử trong website.
Tham khảo: Giải thích ý nghĩa các đơn vị tại Mozilla Developers Network
Về đơn vị, thì trong CSS có hai loại đơn vị là Absolute Units (đơn vị tuyệt đối) và Relative Units (đơn vị tương đối). Trong đó:
Đơn vị tuyệt đối
Là các đơn vị vật lý đã được định nghĩa sẵn và đại diện cho các đơn vị đo lường vật lý. Các đơn vị này không bị phụ thuộc và không hề thay đổi bởi bất cứ tác động nào. Ví dụ như đơn vị mét, xen-ti-mét,..là các đơn vị tuyệt đối.
Các đơn vị tuyệt đối sử dụng trong CSS gồm có:
- px: Đây là một đơn vị được sử dụng trên màn hình hiển thị, một px sẽ tương đương với một điểm ảnh trên màn hình hiển thị. Chất lượng của điểm ảnh sẽ hoàn toàn khác nhau trên một số thiết bị, ví dụ như một điểm ảnh trên các thiết bị in ấn sẽ khác với một điểm ảnh trên các thiết bị màn hình độ phân giải thấp.
- pt: Đơn vị point và cứ 1 ich = 72pt.
HTML:
HTML:
<p id="px-unit">Thử nghiệm đơn vị px</p>
<p id="pt-unit">Thử nghiệm đơn vị pt</p>CSS:
Mã:
#px-unit {
font-size: 25px;
}
#pt-unit {
font-size: 72pt;
}Kết quả:
Là các đơn vị đo lường được sử dụng trong CSS ở mức tương đối, nghĩa là nó có thể sẽ được thay đổi bởi các thành phần khác ví dụ như thay đổi phụ thuộc vào kích thước màn hình.
Các đơn vị tương đối được sử dụng trong CSS gồm có:
- % (percentages): Là đơn vị tham chiếu tỷ lệ so với một phần tử mẹ của nó dựa vào kích thước. Ví dụ bạn có một cái khung với kích thước là 500px và khung bên trong có kích thước là 50% thì nó sẽ là 250px. Nếu bạn sử dụng đơn vị phần trăm này để gán kích thước cho thẻ <html> trên website thì nó sẽ thay đổi theo kích thước màn hình hoặc/cửa sổ website.
- em: Là đơn vị tham chiếu tỷ lệ so với phần tử mẹ của nó dựa vào giá trị của thuộc tính font-size. Ví dụ bạn đặt cho font-size cho phần tử mẹ của nó là 19px thì nếu bạn sử dụng em trong khu vực phần tử đó thì 1em = 19px.
- rem: Là đơn vị tham chiếu tỷ lệ so với phần tử gốc của một website dựa vào thuộc tính font-size, nghĩa là sẽ biến đổi tùy theo giá trị của thuộc tính font-size trong thẻ <html>. Cũng như rem, nếu bạn khai báo font-size cho thẻ <html> là 16px thì 1rem = 16px.
HTML:
HTML:
<div id="px">
<div id="percent">
</div>
</div>CSS:
Mã:
#px {
width: 500px;
height: 300px;
background: red;
/* Không cần để ý */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:box;
box-pack:center;
box-align:center;
}
#percent {
width: 50%;
height: 50%;
background: blue;
}Kết quả:
HTML:
HTML:
<div id="parent">
<p>Đây là đoạn chữ có giá trị là 2em.</p>
</div>CSS:
Mã:
#parent {
font-size: 16px;
}
#parent p {
font-size: 2em;
}Kết quả:
Lời kết
Bây giờ bạn đã hiểu ý nghĩa của từng đơn vị chưa nào? Thực ra trên tất cả các đơn vị trên thì bạn nên sử dụng đơn vị px cho dễ nếu bạn mới bắt đầu học CSS hoặc làm giao diện website đơn giản, còn các đơn vị khác bạn sẽ có dịp sử dụng khi đã có kinh nghiệm sử dụng CSS để làm các giao diện phức tạp hơn.
Chúc các bạn thành công.
Nguồn: thachpham.com
Bài viết liên quan
Bài viết mới
