Em được tính như thế nào?

Question

Tôi đã nhận thấy rằng bạn có thể sử dụng 1em và nó sẽ trông khác nhau trên các trang web khác nhau.

Tỷ lệ tương ứng với?

• Phông chữ được sử dụng?
• Kích thước phông chữ lớn nhất?
• Chiều rộng/chiều cao của trang?

Answer 1

Xem http://w3schools.com/cssref/css_units.asp

1em bằng với kích thước phông chữ hiện hành. 2em có nghĩa là gấp 2 lần kích thước của phông chữ hiện tại. Ví dụ: nếu một phần tử được hiển thị với phông chữ là 12 pt, thì '2em' là 24 pt. Các 'em' là một đơn vị rất hữu ích trong CSS, vì nó có thể thích ứng tự động với phông chữ mà người đọc sử dụng

Một EM là liên quan đến các yếu tố hiện nó được định nghĩa trên. Nếu bạn sử dụng các kích thước tương đối (như 0.9em), chúng nhân và có thể dẫn đến các thứ nguyên không mong muốn.

Bây giờ, kích thước mặc định của phông chữ là không phải là tiêu chuẩn giữa các trình duyệt. Và có một vấn đề với IE (ít nhất là IE cũ) khi thiết lập phông chữ cho một đơn vị pixel cụ thể. A good overview for font sizing can be found on A List Apart.

Answer 2

Em được định nghĩa là chiều cao của chữ cái viết hoa "M" trong phông chữ và kích thước hiện tại.

https://web.archive.org/web/20131127083352/http://www.guistuff.com/css/css_units.html

Answer 3

Theo W3C một em:.

"tương đương với giá trị tính toán của 'font-size' tài sản của các yếu tố trên mà nó được sử dụng Trường hợp ngoại lệ là khi 'em 'xảy ra trong giá trị của thuộc tính' kích thước phông chữ ', trong trường hợp này nó đề cập đến kích thước phông chữ của phần tử gốc. "

Nói cách khác, ems không có kích thước tuyệt đối. Họ đưa vào giá trị kích thước của họ dựa trên nơi họ đang có. Đối với hầu hết các nhà thiết kế web, điều này có nghĩa là họ đang ở trong một trình duyệt Web, do đó, một phông chữ cao 1em có cùng kích thước với kích thước phông chữ mặc định cho trình duyệt đó.

Đối với hầu hết các trình duyệt, giá trị mặc định 1em = 16px