Cách sử dụng các đơn vị đo trong CSS

Các bạn có bao giờ tự hỏi tại sao trong CSS có nhiều đơn vị đo đến như thế ? Tại sao không dùng 1 đơn vị đo thôi ?.... 1 phần lý do và mục đích là để linh hoạt trong hiển thị cho từng thiết bị , ngày nay với rất nhiều thiết bị với kích cỡ màn hình khác nhau việc sử dụng 1 đơn vị cố định sẽ gây nhiều bất cập, việc hiển thị sẽ không đúng như mong muốn thiết kế ban đầu. Chính thế nên việc hiểu và sử dụng linh hoạt các đơn vị trong CSS là rất cần thiết.

Phân loại

Chúng ta có 2 loại đơn vị đó là tuyệt đốitương đối

Đơn vị đo tuyệt đối có nghĩa là kích thước dài, rộng , cao của 1 phần tử sẽ luôn cố định dù cho phần tử đó hiển thị trên laptop, mobile, tablet , PC ... trong CSS chúng ta hay dùng đơn vị loại này nhất đó chính là đơn vị px;

px là đơn vị đo kích thước màn hình hiển thị thông qua điểm ảnh, liên quan đến điểm ảnh chúng ta lại có khái niệm độ phân giải , độ phân giải là số điểm ảnh trong 1 inch . Có thể đến đây chúng ta vẫn chưa mường tượng ra được, mình sẽ quy đổi về đơn vị thân quen để chúng ta cùng hiểu hơn 1px = 0.026458333 cm.

Đơn vị đo tương đối là các đơn vị đo chiều dài phụ thuộc vào các thành phần khác, chúng ta có các đơn vị sau thường xuyên được sử dụng đó là em, rem, và % . Chúng ta cùng đi tìm hiểu cũng như phân biệt sự khác nhau giữa các đơn vị này luôn nhé nhất là giữa em và rem

Đơn vị % thì dễ rồi mình sẽ không nói chi tiết về % nữa mà đi luôn vào em và rem luôn. Giống nhau chúng đều phụ thuộc vào giá trị front-size của phần tử khác. Khác nhau giữa chúng là là rem phụ thuộc vào font-size của phần tử gốc của trang, phần tử cụ tổ luôn đó là phần tử <html >. Một điều lưu ý là nếu chúng ta không set font-size cho phần tử cụ tổ thì trình duyệt sẽ chọn mặc định là font-size là 16px luôn nhé.

Để hiểu về em chúng ta cùng xem ví dụ dưới

đơn vị

Giả sử chúng ta có thẻ b có class là classb là thẻ con của thẻ a nào đó. theo đó em sẽ được quy đổi ra đơn vị px nhưng ra bao nhiêu px thì lại phụ thuộc vào chính font-size của thẻ b đó. Điều gì xảy ra nếu thẻ b không có giá trị font-size nhưng thẻ a lại có giá trị font-size , khi này giá trị em sẽ theo giá của thẻ a vì thẻ b là thẻ con của a nên b sẽ kế thừa thuộc tính font-size của thẻ cha là a. Việc dùng em cần phải cân nhắc vì trong tài liệu html việc các thẻ có quan hệ cha con, ông cháu là thường xuyên và điều rất nhiều và hiển nhiên vì thế khi dùng em chúng ta cần biết rõ phần tử đó đang có font-size là bao nhiêu ? có thừa hưởng giá trị font-size này từ thẻ cha, ông, cụ nào không.Cũng chính vì lý do này mà rem được dùng rất là nhiều và cũng khuyến khích được dùng nữa.

Trong khi dùng em và rem chúng ta luôn quy đổi ra giá trị font-size bởi vì cỡ chữ trong 1 website là rất quan trọng nó ảnh hưởng đến thiết kế và bố cục của 1 website. Chúng ta dùng em và rem sẽ đảm bảo được với cỡ chữ là như thế nào thì bố cục trang web của chúng ta sẽ luôn phù hợp.

Một số đơn vị đo hay được dùng khác

Khi bạn thao khảo ở đâu đó thì chắc hẳn các bạn cũng bắt gặp đơn vị đo vh và vw đây cũng là các đơn vị tương đối. Các thức hoạt động như sau chúng ta chia chiều rộng và chiều cao của khung nhìn thành 100% vh sẽ ứng với chiều cao, vw ứng với chiều rộng và như vậy thì 1vh sẽ chiếm 1% của khung nhìn. Tương tự với vw.

Tổng Kết

Còn một vài đơn vị tương đối và tuyệt đối khác trong CSS mà mình chưa nêu ra, nhưng theo mình những đơn vị mà chúng ta cùng xem ở trên là các đơn vị thông dụng và được sử dụng nhiều nhất. Việc sử dụng các đơn vị tương đối mang lại rất nhiều lợi ích nó giúp chúng ta hạn chế việc chỉnh sửa mã tương ứng với các thiết bị khác nhau. Việc tìm hiểu và lựa chọn sử dụng hợp lý các đơn vị đo trong css sẽ giúp chúng ta linh hoạt cũng không gặp lúng túng khi lựa chọn các đơn vị đo. Bài viết của mình chắc hẳn vẫn còn nhiều hạn chế bạn có thể để lại bình luận ở phía dưới nhé. Cảm ơn bạn đã đọc chúc bạn thành công.

Tag: CSS