EM 기반 미디어 쿼리를 해결하는 방법

Question

최근 프로젝트에서 EM 미디어 쿼리를 사용하는 방법을 알아 내려고합니다. 그러나 몇 가지 테스트를 거친 후에 미디어 쿼리가 너무 적어서 왜 작동하지 않는지 알았습니다. 본문 대신 학부모 글꼴 크기를 사용하는 것과 관련이있을 수 있습니다. 내 몸은 14px로 설정하고 내 동작은 밖으로 모습 :

$break-small: 22.8571em; //320px 
$break-smallish: 40em; //560px 
$break-med: 54.8571em; //768px 
$break-medish: 68.5714em; //960px 
$break-desk: 73.1428em; //1024px 

몸 글꼴 크기 :

body{ 
    font-size: 14px; 
    line-height: 1.5; 
    min-height: 100%; 
} 

* 나는 내가 한 이해 것과 (내 SCSS 브레이크 포인트 변수에서) : 14분의 768을 (의 기본 글꼴 크기) = 폭은 EM의

가 나는 div라는 헤더를했습니다 말해,이 div에는 font-size 설정이 div의 자녀가 없다. 확실하게 그것은 여전히 ​​몸을 사용하게 될 것입니다 font-size?

Answer 1

미디어 검색어는 글꼴 크기가 body이거나 다른 요소를 기반으로하지 않습니다. 그들은 항상 브라우저 환경 설정에서 사용자가 설정 한 기본 글꼴 크기를 참조합니다. 대부분의 브라우저에서이 기본 글꼴 크기는 약 16px이며 CSS에서는 인 font-size 속성의 초기 값에 해당합니다. spec에서 :

미디어 쿼리의 상대 단위는 초기 값을 기반으로합니다. 즉, 단위는 선언 결과에 기반하지 않습니다. 예를 들어, HTML에서 'em'단위는 'font-size'의 초기 값에 상대적입니다.

이 같은 기본 글꼴 크기는 (here 참조) html 인 루트 요소, 하지body에 의해 상속됩니다. body에 상대 글꼴 크기를 지정하면 body은 계산 된 글꼴 크기가 html 인 자체 계산을 기반으로합니다. 즉, font-size을 html에 설정하면 이 아닌은 미디어 쿼리에서 ems가 계산되는 방식에도 영향을 미칩니다.

Answer 2

짐작할 만하다면 em 단위는 문서 루트를 기준으로하지 않고 부모 요소의 font-size에 상대적인 글꼴 크기를 설정합니다. 후자를 찾고있는 경우 rem 장치를 찾고 있지만 응용 프로그램에 따라 browser support이 문제 일 수 있습니다. http://jsfiddle.net/afp46/이

HTML :

<span >This is text</span> 

<div><span >This is text</span></div> 

<span><span>This is text</span></span> 

CSS :

body { 
    font-size: 14px; 
} 

div { 
    font-size: 16px; 
} 

span { 
    font-size: 1.2em; 
} 

Answer 3

내가 몸 글꼴 크기를 100 %로 그 변경 것입니다 다음은이

샘플에 대해 다음과 바이올린을 참조하십시오 EM 및 % s 사이트의 유연성

Answer 4

font-s rem으로 "root em"을 나타냅니다. 그것은 훨씬 더 일관성이 있습니다.여기에 대해 자세히 알아보기 : http://snook.ca/archives/html_and_css/font-size-with-rem

또한, 나는 당신의 CSS에이를 추가하는 것이 좋습니다 :

html { 
    font-size: 62.5%; 
} 

지금, 당신의 REMS 또는 EMS는 쉽게 변환 할 수 있습니다. 10px font-size는 1rem 또는 1em이됩니다. 좋았지? :) 다시 말하지만, 요즘은 훨씬 더 나은 연습 인 rems를 사용합니다.