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.
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.
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ế.
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.