rem, "px로"변환하는 방법?

Question

나는 Chrome과 Dev Tools를 통해 웹 사이트를 검사하고 있습니다. 요소를 검사 할 때 font-size에 대한 rem 속성 만 있습니다.

나는이 픽셀로 "번역"할.

방법이 있습니까? 그렇지 않은 이유는 무엇입니까?

Answer 1

rem은 루트 요소의 글꼴 크기 (HTML 문서에서 html)의 비율입니다.

당신이 그 요소 (픽셀)의 글꼴 크기가 무엇인지 알고 있다면, 당신은 rem 값에 의해 단지 여러 수 있습니다.

(예를 들어, 명시 적으로 지정되지 않고 사용자의 기본 설정을 사용하고, 때문에) 당신이 모르는 경우

당신은 할 수 없습니다. (그들이 당신의 스타일 시트의 계산 된 값을 표시 곳)

브라우저의 개발자 도구는 아마 당신을위한 값을 계산하지만 그들은 당신이 당신의 기본 글꼴 크기에 대해 구성한 어떤 값을 사용하는 것입니다. 다른 사람들은 뭔가 다른 것을 가질 수 있습니다. 당신은 픽셀로 렘에 임의의 숫자를 변환 할 경우

Answer 2

당신은

getComputedStyle(theElement).fontSize; 

를 사용 할 수 있습니다. (좀 더 정밀도를 갖기 위해 1000 사용)

function rem2px(rem) { 
    var el = document.createElement('div'); 
    document.body.appendChild(el); 
    el.style.width = '1000rem'; 
    var factor = el.clientWidth/1000; 
    document.body.removeChild(el); 
    return rem * factor; 
} 

가