Pixels sang em
Chuyển đổi px sang em bằng cách dùng kích thước phông chữ của phần tử gốc. em liên quan đến nút gốc trực tiếp — hữu ích khi phần đệm của nút phải chia tỷ lệ theo văn bản nhãn của nó hoặc thụt lề danh sách lồng nhau theo kích thước nội dung cục bộ. Công thức: em = px ` parentFontSizePx.
Pixel
Cỡ chữ phần tử cha (px)
Kết quả
1em
Cách chuyển đổi px thành em
1. Xác định kích thước phông chữ của phần tử cha bằng px (ví dụ: 18 px).
2. Nhập giá trị px để chuyển đổi (ví dụ: khoảng cách chữ cái 9 px).
3. Đọc kết quả em (9 ÷ 18 = 0,5 em).
4. Áp dụng CSS trên phần tử con nằm trong phạm vi ngữ cảnh gốc đó.
Ví dụ về Px cho em
Phần đệm nút
Phông chữ gốc 16 px; đệm dọc 8 px → 0,5 em. Chia tỷ lệ nếu phần gốc trở thành 18 px trên màn hình lớn.
Tiêu đề lồng nhau
Phông chữ phần 20 px; tiêu đề phụ thiết kế 24 px → 1,2 em so với phần, không phải gốc.
Căn chỉnh biểu tượng
Biểu tượng nội tuyến 14 px với dòng văn bản 16 px → hộp biểu tượng 0,875 em căn chỉnh theo số liệu văn bản.
Khi nào nên chuyển px sang em
• Khi phần bên trong thành phần phải chia tỷ lệ theo kích thước phông chữ cục bộ thay đổi.
• Khi bạn tạo kiểu cho văn bản có định dạng trong đó các tiêu đề nằm bên trong các vùng chứa có kích thước khác nhau.
• Khi CSS cũ sử dụng em và bạn ánh xạ các thiết kế px mới vào cùng một hệ thống.
Khi nào nên chọn công cụ khác
• Khi bạn muốn khoảng cách nhất quán trên toàn trang web — rem từ gốc thì đơn giản hơn.
• Khi việc lồng sâu gây ra các lỗi phức hợp — hãy ưu tiên rem cho lề.
• Khi bạn cần định cỡ tương đối với khung nhìn — hãy dùng vw/vh.
Tránh các cạm bẫy phức tạp
Các menu được lồng sâu với cỡ chữ: 0,9em ở mỗi cấp độ sẽ thu nhỏ văn bản một cách bất ngờ. Ưu tiên rem cho cỡ chữ ở cấp độ cấu trúc; sử dụng em để đệm cục bộ được gắn với một phụ huynh. Ghi lại các giả định gốc trong mã thông báo thiết kế.
cho các truy vấn phương tiện?
Truy vấn phương tiện trong các đơn vị được tham chiếu mặc định của trình duyệt trong lịch sử (16 px), không phải thành phần gốc. Thiết kế đáp ứng hiện đại thường sử dụng các điểm dừng rem hoặc px — biết bối cảnh mà biểu định kiểu của bạn nhắm tới.
Câu hỏi thường gặp
Sự khác biệt giữa em và rem là gì?
em tham chiếu kích thước phông chữ gốc; rem chỉ tham chiếu kích thước phông chữ gốc (html).
Tại sao em lồng nhau lại kết hợp?
Mỗi cấp độ sẽ nhân lên: 1,2 em bên trong 1,2 em cha mẹ = 1,44 × gốc nếu cả hai đều áp dụng cho chuỗi kích thước phông chữ.
Công thức?
em = px ` parentFontSizePx. Luôn sử dụng kích thước phông chữ được tính toán của cha mẹ trực tiếp.
Đệm trong em?
Có — phần đệm/lề theo tỷ lệ em với kích thước phông chữ của chính phần tử (đối với lề/phần đệm, thông số kỹ thuật sử dụng kích thước phông chữ của phần tử).
Em bắt nguồn từ khi nào?
Theo truyền thống, "độ rộng của chữ M" trong loại kim loại; hiện được xác định liên quan đến kích thước phông chữ trong CSS.
Dữ liệu có được tải lên không?
Không. Quá trình chuyển đổi diễn ra cục bộ.