글꼴 크기를 위아래로 유지하면서 상황에 민감하지 않게하려면 어떻게해야합니까?

Question

프로젝트에 깊이 들어가면 글꼴 크기로 em을 사용하는 데 문제가 있습니다. 여러 문맥에서 재사용하는 마크 업 모듈이 여러 개 있습니다. 계산 된 font-size가있는 상수 헤드 아프기가 다른 컨텍스트에서 다릅니다. 반응 형 디자인을 사용함에 따라 em을 사용하는 것이 중요합니다. 따라서 글꼴 크기의 확장 성이 있어야합니다. 간단한 예를 보려면 jsFiddle을 참조하십시오. 글꼴 크기를 위아래로 유지하면서 상황에 민감하지 않게하려면 어떻게해야합니까?

Answer 1

상속은 ems로 작업 할 때 상당히 성가시다. 학급 이름 덕분에 상황을 알기 때문에 몇 가지 간단한 수학을 적용하여이 문제를 극복 할 수 있어야합니다. 부모가로 정의되어 있기 때문에, 두 번째는 실제로 4.5em하게 될 경우

.context1 { 
    font-size: 1em; 
} 
.context2 { 
    font-size: 1.5em; 
} 
.my-font-size { 
    font-size: 3em; 
} 

첫 번째 제목이 3em 될 것입니다 :

당신의 CSS는 현재처럼 보이는의 이상적인로 .context1 모든 것을 보자 1.5 배 더 큽니다. 이 문제를 얻으려면, 다음을 수행 할 수 있습니다 :

.context1 { 
    font-size: 1em; //default font size for .context1 
} 
.context2 { 
    font-size: 1.5em; //default font size for .context2 
} 
.my-font-size { 
    font-size: 3em; //default font size for .my-font-size 
} 
.context2 .my-font-size { 
    font-size: 2em; //adjust the font size for the parent's value (3/1.5) 
} 

마찬가지로 .context2이 규범이었다 그래서 그것을 정의 할 수 있습니다 :

.context1 .my-font-size { 
    font-size: 4.5em; //(3 * 1.5) 
} 

Here's the updated the example합니다.

Answer 2

당신은 rem 유닛을 찾고있는 것처럼 들립니다.

http://jsfiddle.net/6YC89/1/

.context1 { 
    font-size: 1em; 
} 
.context2 { 
    font-size: 1.5em; 
} 
.my-font-size { 
    font-size: 3rem; 
} 

브라우저 지원이 매우 좋다 (참조 : http://caniuse.com/#feat=rem을). 그것을 지원하지 않는 유일한 주요 브라우저는 IE8입니다.