Hướng Dẫn Chuyển Đổi Đơn Vị CSS: px, rem, em, %, vw, vh

Đơn vị CSS là nền tảng của mọi thiết kế web. Chúng định nghĩa kích thước, khoảng cách và vị trí trên tất cả các yếu tố. Chọn đúng đơn vị cho đúng ngữ cảnh có thể tạo ra sự khác biệt giữa một trang web responsive, dễ tiếp cận và một trang web bị hỏng trên các thiết bị khác nhau. Hướng dẫn này bao gồm mọi đơn vị CSS, khi nào nên sử dụng chúng và cách chuyển đổi giữa chúng.

Hiểu Về Đơn Vị CSS

Đơn vị CSS được chia thành ba loại: tuyệt đối (kích thước cố định), tương đối (tương đối so với thứ khác) và viewport (tương đối so với kích thước viewport). Mỗi loại có những trường hợp sử dụng cụ thể và hiểu khi nào nên sử dụng mỗi loại là điều cần thiết để thiết kế web chuyên nghiệp.

px (Pixel)

Đơn vị tuyệt đối có kích thước cố định không thay đổi dựa trên ngữ cảnh. Chúng hữu ích cho phương tiện in ấn và các tình huống mà kích thước chính xác là quan trọng, nhưng ít linh hoạt hơn cho thiết kế web responsive.

pt, cm, mm, in

Đơn vị tương đối điều chỉnh dựa trên một số giá trị tham chiếu, làm cho chúng trở nên cần thiết cho thiết kế responsive. Chúng tự động điều chỉnh khi người dùng thay đổi kích thước font hoặc khi bố cục thay đổi.

Đơn Vị Tuyệt Đối

), thường là 16px theo mặc định của trình duyệt. Điều này làm cho nó nhất quán và có thể dự đoán trên toàn bộ trang.

rem (Root EM)

• px là đơn vị CSS phổ biến nhất. Một pixel CSS không nhất thiết khớp với một pixel màn hình vật lý — trên màn hình mật độ cao, một px CSS có thể bao gồm nhiều pixel thiết bị. px là đơn vị tuyệt đối, có nghĩa là nó không thay đổi dựa trên các phần tử khác.
• pt (point), cm, mm và in là đơn vị vật lý chủ yếu hữu ích cho stylesheet in ấn. Trên màn hình, chúng được chuyển đổi thành px ở các tỷ lệ khác nhau tùy theo hệ điều hành. 1pt = 1.333px theo mặc định, nhưng điều này thay đổi.
• Sử dụng rem cho font-size để có thể mở rộng và khả năng tiếp cận. Người dùng có thể phóng to bằng cách tăng kích thước font gốc của trình duyệt và tất cả văn bản sử dụng rem sẽ điều chỉnh theo tỷ lệ.
• Sử dụng % hoặc vw cho chiều rộng để tạo bố cục linh hoạt. % tương đối so với cha, vw tương đối so với viewport. Chọn dựa trên việc bạn muốn co giãn theo container hay theo màn hình.

em

em tương đối so với kích thước font của chính phần tử đó (hoặc phần tử cha đối với font-size). Điều này làm cho nó hữu ích cho các thành phần cần co giãn theo tỷ lệ, nhưng có thể gây ra hiệu ứng lãi kép nếu không được quản lý cẩn thận.

Đơn Vị Tương Đối

Phần trăm tương đối so với phần tử cha. Đối với chiều rộng, nó là phần trăm chiều rộng của cha. Đối với chiều cao, nó là phần trăm chiều cao của cha (nhưng chỉ khi cha có chiều cao rõ ràng). Đối với font-size, nó tương đối so với kích thước font của cha.

% (Phần Trăm)

Đơn vị viewport tương đối so với kích thước viewport của trình duyệt. Chúng lý tưởng cho bố cục toàn màn hình, typography lưu động và các thành phần cần co giãn theo kích thước màn hình.

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

ex và ch

Đơn vị viewport mới giải quyết các vấn đề với thanh địa chỉ di động. dvh (dynamic viewport height) điều chỉnh khi thanh địa chỉ trình duyệt xuất hiện hoặc biến mất. svh (small viewport height) sử dụng kích thước viewport với thanh địa chỉ mở rộng. lvh (large viewport height) sử dụng viewport với thanh địa chỉ thu gọn.

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

Đơn Vị Viewport

Chọn đúng đơn vị phụ thuộc vào những gì bạn đang tạo kiểu và hành vi bạn muốn. Dưới đây là các khuyến nghị dựa trên các tình huống phổ biến:

vw và vh

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

Chuyển đổi giữa các đơn vị là cần thiết khi làm việc với thông số thiết kế hoặc di chuyển giữa các hệ thống đơn vị khác nhau.

vmin và vmax

• Sử dụng rem hoặc px cho chiều cao. % cho chiều cao có thể phức tạp vì nó yêu cầu cha có chiều cao rõ ràng. rem cung cấp kích thước nhất quán, px cho kích thước chính xác.
• Sử dụng rem cho padding và margin để duy trì tỷ lệ nhất quán với kích thước font. Điều này tạo ra nhịp điệu theo chiều dọc thích ứng với tùy chọn kích thước font của người dùng.
• Sử dụng em hoặc rem cho media queries. rem được ưu tiên hơn vì nó nhất quán không phụ thuộc vào ngữ cảnh. Tránh sử dụng px trong media queries vì nó không điều chỉnh khi người dùng zoom.

Khi Nào Sử Dụng Mỗi Đơn Vị

Để chuyển đổi px sang rem, chia giá trị px cho kích thước font gốc (thường là 16px). Ví dụ: 32px / 16 = 2rem.

dvh, svh, lvh

Kích Thước Font

Để chuyển đổi rem sang px, nhân giá trị rem với kích thước font gốc. Ví dụ: 1.5rem * 16px = 24px.

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

Chuyển Đổi Giữa Các Đơn Vị

Công thức chung rất đơn giản. Đối với px sang rem: rem = px / kích thước font gốc. Đối với rem sang px: px = rem * kích thước font gốc. Đối với px sang em: phức tạp hơn vì em phụ thuộc vào ngữ cảnh.

• Sử dụng đơn vị nhất quán: Chọn rem hoặc px cho kích thước font và nhất quán trên toàn bộ dự án. Trộn lẫn đơn vị tạo ra hành vi không thể dự đoán và làm cho bảo trì khó khăn hơn.
• Kết hợp đơn vị không đúng cách: Sử dụng px cho padding và rem cho font-size trong cùng một thành phần có thể gây ra các vấn đề co giãn không mong muốn. Giữ các đơn vị liên quan nhất quán.
• Kiểm tra trên nhiều trình duyệt: Đơn vị viewport mới như dvh không được hỗ trợ trong các trình duyệt cũ. Cung cấp fallback và kiểm tra trên các trình duyệt mục tiêu của bạn.

Công cụ chuyển đổi đơn vị CSS miễn phí của chúng tôi xử lý tất cả các phép tính này ngay lập tức. Nhập giá trị của bạn, chọn đơn vị nguồn và đích, và nhận kết quả chính xác. Nó hỗ trợ px, rem, em, pt, %, vw, vh và nhiều đơn vị khác.

Các Mẫu Thiết Kế Responsive

Hàm clamp() tạo ra typography responsive mượt mà mà không cần media queries. Nó chấp nhận giá trị tối thiểu, giá trị ưu tiên (thường dựa trên viewport) và giá trị tối đa. Font sẽ co giãn mượt mà giữa các giới hạn này khi viewport thay đổi.

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

CSS Grid với đơn vị fraction (fr) và repeat() với auto-fit hoặc auto-fill tạo ra lưới responsive mà không cần media queries. Các mục tự động xuống dòng khi không gian không đủ.

Các Lỗi Thường Gặp Về Đơn Vị

Sử dụng width: 100% và height: auto cho hình ảnh responsive. Đối với video, sử dụng kỹ thuật padding-bottom aspect-ratio. Đối với hero toàn màn hình, sử dụng 100vw / 100vh, nhưng kiểm tra trên di động nơi thanh địa chỉ ảnh hưởng đến chiều cao viewport.

Câu Hỏi Thường Gặp

• Use rem for font sizes:rem-based font sizes respect user preferences and scale consistently across your entire application.
• Use em for component spacing:em because they scale proportionally when the component's font size changes.
• Use px for borders and fine details: Values that should not scale with font size, such as 1px borders and shadow offsets, belong in pixels.
• Use percentages for layout widths: Flexible layouts use percentage-based widths for columns and containers, allowing content to reflow across screen sizes.
• Use viewport units for full-screen elements:vhvw.
• Use clamp() for fluid typography:clamp() to create smooth scaling between minimum and maximum values.
• Never set root font-size in px: Always use a percentage (like 62.5%) or leave it at the browser default. Setting it in pixels overrides the user's accessibility preferences.
• Be consistent: Pick a unit strategy for your project and stick with it. Mixing units randomly makes the codebase harder to maintain and debug.