Các đơn vị CSS là một trong những khía cạnh cơ bản nhất để xem xét trong khi tạo bố cục trang web. Các đơn vị này sẽ xác định cách thiết kế của bạn sẽ tương tác trên các thiết bị khác nhau.

Nhưng khi nói đến các đơn vị CSS, có nhiều tùy chọn để lựa chọn và tất cả các tùy chọn không bằng nhau. Các đơn vị CSS không chỉ giới hạn ở các phông chữ, vì vậy, với tư cách là nhà phát triển giao diện người dùng, bạn cũng nên hiểu cách các đơn vị này ảnh hưởng đến bố cục.

Trong bài viết này, tôi sẽ chỉ cho bạn cách các đơn vị CSS khác nhau hoạt động, vì vậy bạn có thể sử dụng chúng để tạo bố cục và thiết kế trang web tốt hơn.

Các loại đơn vị CSS
Các đơn vị CSS có thể được tách ra trong các loại sau:

Đơn vị tuyệt đối
Phông chữ đơn vị tương đối
Viewport đơn vị tương đối
Đơn vị tuyệt đối
Một số đơn vị phụ thuộc vào các giá trị tuyệt đối nhất định và không bị ảnh hưởng bởi bất kỳ kích thước màn hình hoặc phông chữ nào. Các đơn vị này hiển thị có thể khác nhau tùy thuộc vào độ phân giải màn hình khác nhau, vì chúng phụ thuộc vào DPI (số chấm trên mỗi inch) của màn hình.

Các đơn vị này là:

px (pixel)
theo số inch)
cm (centimet)
mm (milimet)
máy tính
pt (điểm)
Điểm ảnh
Pixel là đơn vị được sử dụng phổ biến nhất và được chấp nhận. Và nó được coi là cơ sở đo lường cho nhiều đơn vị khác. Nó cung cấp kết quả nhất quán giữa các thiết bị khác nhau.

Phần boxtử trong ví dụ sau có chiều cao 150px và chiều rộng 150px, và nó sẽ giữ nguyên trên tất cả các kích thước màn hình.

Tất cả các đơn vị tuyệt đối khác như tính bằng (inch), cm (centimet) và mm (milimet) là các đơn vị đo lường trong thế giới thực với rất ít trường hợp sử dụng CSS trong thế giới thực.

Tuy nhiên, vẫn tốt để hiểu mối quan hệ của chúng với pixel, vì vậy đây là cách chúng so sánh:

1in = 96px
1cm = 37,8px
1mm = 3,78px
Trong khi pc (picas) và pt (điểm) liên quan trực tiếp đến inch.

1in = 72pt
1in = 6pc
Rem
Ngoài pixel, tất cả các đơn vị tuyệt đối khác có rất ít trường hợp không sử dụng cho CSS màn hình, nhưng vì chúng là đơn vị đo lường trong thế giới thực, chúng có thể được sử dụng hiệu quả trong CSS in. (Trong trường hợp bạn đang tự hỏi về pixel, chúng cũng hoạt động tốt trong in CSS!)

Phông chữ đơn vị tương đối
Có một số đơn vị phụ thuộc vào kích thước phông chữ hoặc họ phông chữ của tài liệu hoặc các thành phần cấp chính của nó. Điều này bao gồm các đơn vị như:
em
rem
ex
ch
Em
Em là một đơn vị chiều dài tương đối; nó phụ thuộc vào kích thước phông chữ của phần tử cha hoặc tài liệu. Theo mặc định, 1embằng với 16pxnếu không font-sizeđược xác định.

Em thừa hưởng kích thước từ kích thước phông chữ ngay lập tức của cha mẹ. Nói, nếu một phần tử cha có font-size:18px, thì 1emsẽ được đo như 18pxđối với tất cả con của nó.

Ở đây chúng tôi có một div .postvới ba đứa trẻ .post-item, với một tiêu đề và một số văn bản.

Ưu điểm của việc sử dụng em là, nếu bạn quyết định thay đổi font-size, paddingvà margincủa mỗi phần tử tương ứng, sau đó bạn chỉ cần thay đổi các yếu tố phụ huynh kích thước phông chữ và tất cả các yếu tố khác sẽ điều chỉnh cho phù hợp.

Điều đó sẽ không xảy ra với các đơn vị tuyệt đối như px, nơi bạn phải điều chỉnh từng yếu tố riêng lẻ.
Cách tạo một trang web WordPress đa ngôn ngữ
Bản chất kế thừa này có thể hơi khó quản lý, tuy nhiên, nếu các phần tử lồng nhau cũng có riêng font-sizechúng.

Giống như trong bản demo trước, nếu bạn bọc tiêu đề và đoạn bên trong một mục khác divtrong một trong các mục con, bạn sẽ thấy kết quả lạ.