HTML/CSS | Đơn vị px (pixel)

Học HTML, CSS từ Zero Tới Hero

• Tính tuyệt đối
• Lưu ý về đơn vị px
• 1px vật lý
• 1px trong CSS
• Trường hợp sử dụng

Tài nguyên sử dụng trong bài học:

• W3Schools CSS Units

Tính tuyệt đối

Trong CSS, px là từ viết tắt của “pixel” - điểm ảnh, là đơn vị được sử dụng để xác định kích thước, khoảng cách của các phần tử trên trang web và cũng là một trong số các đơn vị được sử dụng phổ biến nhất trong CSS.

Khi sử dụng đơn vị px để định cỡ văn bản, hình ảnh, hoặc phần tử khác trên trang web, chúng sẽ hiển thị với kích thước cụ thể tương ứng với số lượng điểm ảnh được chỉ định. Các phần tử sử dụng đơn vị tuyệt đối sẽ luôn được hiển thị cố định và không có sự phụ thuộc.

Bạn có thể tự trải nghiệm với code mẫu:

<style>
.box1 {
    width: 400px;
    height: 100px;
    background-color: blueviolet;
    border: 10px solid pink;
    text-align: center;
    line-height: 90px;
    margin-bottom: 20px;
}

.box2 {
    width: 50%;
    height: 100px;
    background-color: blueviolet;
    border: 10px solid pink;
    text-align: center;
    font-size: 12px;
    line-height: 90px
}
</style>

<div class="box1">Chiều rộng với đơn vị px </div>
<div class="box2">Chiều rộng với đơn vị % </div>

Chiều rộng với đơn vị px

Chiều rộng với đơn vị %

Sử dụng đơn vị px, class box1 đã có chiều rộng tuyệt đối. Có thể thấy, dù co giãn trình duyệt tới đâu thì chỉ có class box2 thay đổi còn class box1 vẫn được giữ nguyên.

Class box2 đang bị phụ thuộc khi trình duyệt co lại hoặc giãn ra trong khi class box1 thì cố định và không bị phụ thuộc. Sở dĩ class box2 thay đổi theo trình duyệt là vì đang sử dụng % - đơn vị tương đối, cái này bạn sẽ được tìm hiểu kỹ hơn trong bài sau.

Lưu ý về đơn vị px

1px vật lý

Xét về góc độ vật lý, px có liên quan tới độ phân giải thiết bị.

Mỗi một ô vuông trên hình chính là 1 điểm ảnh vật lý.

1px trong CSS

Trên màn hình có mật độ điểm ảnh thấp, 1px trong CSS có thể tương ứng với 1 điểm ảnh vật lý. Tương tự, trên màn hình có điểm ảnh cao, 1px trong CSS sẽ tương ứng với nhiều điểm ảnh vật lý.

Trường hợp sử dụng

Trong CSS, đơn vị px được sử dụng phổ biến, nổi bật với các thuộc tính: width, height, padding, border, margin, v.v. Tuy nhiên, đơn vị px cũng còn một số hạn chế:

• Không linh hoạt đáp ứng các thiết bị: Khi bạn sử dụng px để đặt kích thước các phần tử trên trang web, chúng sẽ không thay đổi dựa trên kích thước màn hình hoặc thiết bị. Điều này dẫn đến việc trang web có thể trông không tốt trên các thiết bị có màn hình khác nhau như điện thoại hoặc máy tính bảng.
• Không tương thích với chế độ tăng cỡ chữ của trình duyệt: Nếu người dùng tăng kích thước trang web sử dụng tính năng tăng cỡ chữ của trình duyệt, các phần tử sử dụng đơn vị px có thể không phản ánh chính xác kích thước được dự định.

Ở các bài tiếp theo, bạn sẽ được tìm hiểu thêm về các đơn vị %, em, rem, v.v. Từ đó có thể hiểu thêm và quyết định khi nào nên dùng đơn vị nào để tối ưu cho trang web nhất có thể.

Tóm tắt

• Đơn vị px là từ viết tắt của Pixel, là đơn vị được sử dụng phổ biến trong CSS.
• Các phần tử sử dụng đơn vị px sẽ luôn được hiển thị cố định và không có sự phụ thuộc vào phần tử khác/trình duyệt.
• Trên màn hình có mật độ điểm ảnh thấp, 1px trong CSS có thể tương ứng với 1 điểm ảnh vật lý. Trên màn hình có điểm ảnh cao, 1px trong CSS sẽ tương ứng với nhiều điểm ảnh vật lý.