css 'ex'단위의 값은 무엇입니까?

Question

은 내가 Gmail의 DOM 검사 시작 지루함의 적합에

오늘 (Xunit, 인기있는 닷넷 단위 테스트 라이브러리.와 혼동되지 않음) (예, 나는 매우 지루했다).

모든 요소가 특정 요소의 너비에 흥미로운 사양을 알기 전까지는 모든 것이 매우 단순 해 보였습니다. 저명한 Google 직원은 희귀 한 '예'단위를 사용하여 여러 가지 표를 지정했습니다.

width: 22ex; 

내가 난처한 상황에 빠진 한 처음 ("? 무슨 '전을'입니다"), 그것은 나에게 돌아왔다 : 나는 CSS에 대해 학습 할 때 처음에는 년 전에서 무언가를 기억하는 것 같다. From the CSS3 spec :

[예 유닛은 상기 first available font의 사용 x 높이 같다. x 높이는 대개 소문자 "x"의 높이와 같기 때문에 그렇게 부릅니다. 그러나 'ex'는 "x"를 포함하지 않는 글꼴에 대해서도 정의됩니다.

좋습니다. 하지만 실제로 사용 된 적이 한번도 없었습니다 (훨씬 덜 사용되었습니다). 나는 ems를 아주 흔하게 사용하고, 그들의 가치에 감사하지만, 왜 "ex"? 그것은 em보다 훨씬 덜 표준적인 것으로 보이고 훨씬 덜 유용합니다.

이 주제를 논의한 몇 페이지 중 하나가 Stephen Poley의 http://www.xs4all.nl/~sbpoley/webmatters/emex.html입니다. 스티븐은 좋은 점을 지니고 있지만, 그의 토론은 나에게 결정적이지 않은 것처럼 보인다.

내 질문은 : 'ex'단위가 웹 디자인에 어떤 가치를 부여합니까?

(이 질문은 주관적 태그 할 수 있지만, 나 자신보다 경험이 많은 SO'ers 결정을 떠날 수 있습니다.) 당신의 높이와 관련하여 크기 뭔가 할 때

Answer 1

그것은 유용 당신의 텍스트의 소문자. 예를 들어, 그래서 같은 디자인 작업을 상상할 :

을 디자인의 타이포그래피 차원에서, 문자의 높이는 요소의 나머지 부분에 중요한 공간 관계를 맺고있다. 위 소스 이미지의 선은 텍스트의 x 높이를 나타내는 데 도움이되지만 해당 텍스트 주변을 설계 할 때 지침이 될 위치를 보여줍니다.

조나단은 주석에서 지적했듯이, ex는 단순히 em (너비)의 높이 버전입니다.

Answer 2

CSS 사양,에있는 의 값은 사용자가 실제로 묻는 것이면 em 단위를 갖는 값과 정확히 같습니다.

글꼴을 상대 크기로 설정할 수 있습니다.

내 기본 글꼴 크기를 알 수 없습니다. 따라서 웹 디자인을위한 하나의 좋은 전략은 절대가 아닌 상대적인 글꼴 크기를 설정하는 것입니다. "10 픽셀"과 같이 고정 된 크기가 아닌 "보통 크기의 두 배"또는 "보통 크기보다 조금 작음"과 같은 크기입니다.

Answer 3

여기에서 고려해야 할 또 다른 사항은 사용자가 글꼴 크기를 올리거나 내릴 때 (Ctrl + 마우스 휠 (창)을 사용하여) 페이지의 크기가 조정되는 방식입니다.

나는 다음을 사용했습니다. 왼쪽 패딩 : 2 em; 패딩 오른쪽 : 2 em;

및 예 : 패딩 - 바닥 : 2 ex; 패딩 - 상단 : 2 예;

따라서 수직 스케일링 속성에 대한 수직 측정 단위와 수평 스케일링 속성에 대한 수평 측정 단위를 사용하십시오.

Answer 4

"단일/이중선 간격"과 같은 용어는 실제로 인접한 두 줄 사이의 오프셋을 의미하며 으로 측정됩니다. 따라서 "이중선 간격"이란 각 줄의 높이가 2 em 인 것을 의미합니다.

따라서 "lines"에 비례하는 수직 거리를 지정하려면 em을 사용하십시오. 예를 들어 소문자의 실제 높이를 원한다면 ex를 사용하십시오. 이것은 말할 것도없이 매우 드문 경우입니다.

Answer 5

질문에 대답하려면 위 첨자와 아래 첨자를 사용하십시오. 예 :

sup { 
    font-size: 75%; 
    height: 0; 
    line-height: 0; 
    position: relative; 
    vertical-align: baseline; 
    bottom: 1ex; 
}