이 스레드를 읽는 것에 대한 나의 이해 는 ems의 요점은 브라우저가 설정할 수있는 기본 글꼴 크기로 웹 페이지의 모든 측정을 정의 한다는 것입니다.
예를 들어 Chrome에서는로 이동하여이 작업을 수행 할 수 있습니다 settings -> show advanced settings -> web content -> font size: very large. 멀리 떨어진 대형 고해상도 모니터를 사용하는 경우이 작업을 수행 할 수 있습니다.
크기 조정에서 ems와 px의 차이점을 보여주는 플런저 를 만들었습니다 .
#div1 {
width: 320px
}
#div2 {
width: 20em;
}브라우저에서 글꼴 크기를 중간으로 설정하면이 div는 동일한 크기, 기본 글꼴 크기는 16px이므로 20em = 320px입니다.
그러나 브라우저 글꼴 크기를 매우 크게 변경하면 ems로 측정 된 div의 크기가 증가한 것을 알 수 있습니다.
그러나 body 태그에서 글꼴 크기를 정의하면이 효과는 무시됩니다.
body {
font-size: 16px;
}이제 CSS가 브라우저에서 설정 한 글꼴 크기를 재정의하고 있기 때문입니다.
페이지를 확대하면 글꼴 만 확대되는 구형 브라우저 시대에는 ems가 중요했을 것입니다. 그러나 요즘 최신 브라우저는 픽셀과 글꼴을 모두 확장하여 확대 문제를 해결합니다.
웹을 둘러 보면 많은 웹 사이트 가 본문 태그에 글꼴 크기를 설정합니다.
예를 들어 스택 오버플로는 body 태그에서 글꼴 크기를 13px로 설정합니다. 브라우저에서 글꼴 크기를 설정해도 스택 오버플로의 레이아웃에는 영향을 미치지 않습니다.
Google 검색 결과는이 작업을 수행하지 않습니다.
(이 두 스크린 샷은 크롬 글꼴 크기를 매우 크게 설정하고 100 % 확대 / 축소로 찍은)
따라서 body 태그에서 글꼴 크기를 설정하는 것은 사용자 자신의 접근성 설정을 방해하기 때문에 나쁜 생각이라고 주장 할 수 있습니다. 그러나 사용자가 확대하여 크기를 늘리면 (모든 픽셀도 비례 적으로 증가 함) 실제 문제는 아닙니다.
body { font-size: XYZ; }사용하여 사용자 스타일 시트를 사용하여 재정의 할 수 있습니다.body { font-size: ZYX !important; }