Sự hiểu biết của tôi từ việc đọc các chủ đề như thế này là điểm của EMS là xác định tất cả các phép đo trong trang web của bạn, theo kích thước phông chữ cơ bản , có thể được đặt bởi trình duyệt của bạn.
Ví dụ: trong Chrome, bạn có thể thực hiện việc này bằng cách đi settings -> show advanced settings -> web content -> font size: very large. Tôi có thể làm điều này nếu tôi đang sử dụng một màn hình lớn, độ phân giải cao, ở rất xa.
Tôi đã tạo ra một plunker thể hiện sự khác biệt giữa ems và px trong kích thước.
#div1 {
width: 320px
}
#div2 {
width: 20em;
}Nếu trong trình duyệt của tôi, tôi đặt kích thước phông chữ ở mức trung bình, các div này sẽ có cùng kích thước, kích thước phông chữ cơ bản là 16px, vì vậy 20em = 320px.
Tuy nhiên, khi tôi thay đổi kích thước phông chữ trình duyệt của mình lên rất lớn, chúng ta có thể thấy rằng div được đo trong ems có kích thước tăng lên.
Tuy nhiên, hiệu ứng này sẽ bị phủ nhận nếu tôi xác định kích thước phông chữ trong thẻ body chẳng hạn.
body {
font-size: 16px;
}Bởi vì bây giờ css của tôi đang ghi đè kích thước phông chữ được đặt bởi trình duyệt.
Tôi nhận ra rằng, EMS sẽ rất quan trọng trong thời của các trình duyệt cũ hơn, trong đó việc phóng to trang sẽ chỉ mở rộng phông chữ. Nhưng ngày nay các trình duyệt hiện đại mở rộng cả pixel và phông chữ, khiến vấn đề phóng to thu nhỏ.
Nhìn khắp nơi trên web - rất nhiều trang web làm bộ kích thước phông chữ trong thẻ cơ thể của họ.
Ví dụ như Stack Overflow, đặt kích thước phông chữ thành 13px trong thẻ body. Đặt kích thước phông chữ trong trình duyệt của tôi không ảnh hưởng đến bố cục của Stack Overflow một chút.
Kết quả tìm kiếm của Google không làm điều này.
(cả hai ảnh chụp màn hình này được chụp với kích thước phông chữ chrome được đặt ở mức rất lớn và thu phóng 100%).
Vì vậy, có lẽ bạn có thể lập luận rằng cài đặt kích thước phông chữ trong thẻ body, là một ý tưởng tồi vì nó ngăn chặn cài đặt trợ năng của chính người dùng. Nhưng do người dùng có thể phóng to để tăng kích thước (cũng sẽ tăng tỷ lệ tương ứng cho tất cả các pixel) - đây dường như không phải là vấn đề thực sự.
body { font-size: XYZ; }bằng cách sử dụng biểu định kiểu người dùng vớibody { font-size: ZYX !important; }