em하지만 중첩 된 항목의 문제가있어서 %을 yui으로 사용하기로 결정했습니다. px를 %로 변환하는 방법 (px를 글꼴 크기로 em로 변환하는 방법)
은 EMS보다 더 지속적으로 렌더링하기 때문에 항상 단위 으로 비율을 사용하여 글꼴의 크기를 변경, 그들은 수 있기 때문에 (픽셀 달리) 크기 조정 사용자를 시작합니다.
px를 %로 변환하는 방법은 무엇입니까? 이 안에 http://pxtoem.com/
편집
에 PX입니다처럼이 예제는 매우 좋은 있지만 그것은 단지 24 픽셀까지입니다 발견했다.
http://yuilibrary.com/yui/docs/cssfonts/cssfonts-size.html
어떻게px 각 크기
%의 크기를 계산합니다. 예를 들어, 경우로,
45px
비율에 대한 %에 크기가됩니다 어떤이 표에 따른 유체 레이아웃입니다, 항상 브라우저 실제 크기에 의존하고 레이아웃을 고정하는 동안은, 크기 조정에 따라 변경됩니다은 브라우저 크기에 관계없이 절대 변경되지 않습니다.
다른 말로하면, 무엇을하려하는지, 당신은 옳지 않은 것을으로 가정해야합니다.
예를 들어, 당신은 100 %가 1024px 될 것이라고 가정 할 수 있지만 내 화면에, 그게 당신을 위해 계산을 할 수 있도록 모든 주요 브라우저가 내부적으로 픽셀로 작업 1920px ...
글꼴 크기에 대해 이야기하고 있다고 생각합니다.이 경우에는 틀린 것입니다. 글꼴 크기의 백분율은 설정된 값을 가지며 브라우저 창 크기와 관련이없는 가장 가까운 상위 글꼴 크기를 기반으로합니다. – mekwall
그러면 100 %가 1em 맞습니다. – balexandre
은 항상 백분율을 처리 할 때 기본 숫자로 내려갑니다. – mekwall
될 것입니다. JavaScript를 사용하여 font-size을 가져 와서 글꼴의 픽셀 크기를 쉽게 얻을 수 있습니다 (제 경우에는 jQuery를 사용합니다).
편집를 참조하십시오 : 난 그냥 다시 질문을 읽고 당신이 반대를 필요 실현, 커피 더 필요합니다.
그러나 this test case
, 당신은 비교 대상 기본 픽셀을 알아야 할 것 같은 당신이 할 수oppsite를 얻으려면. 위 테스트 케이스에서 나는 부모로부터의 백분율을 모두 font-size과 body 엘리먼트로부터 얻었다.
이미 2 개의 답변이 게시되었지만 정확하지 않습니다. 퍼센트 길이를 허용하는 모든 CSS 속성은이 값이 계산되는 방법을 정의합니다. font-size의 측면에서,이 CSS 2.1의 말씀입니다 :
백분율 :
그것은 창 크기 정도에 의존하지 않습니다 상속 글꼴 크기를 참조하십시오.-이 100% 대부분의 경우에, 16px이 font-size의 기본값은 다음과 같습니다
어떻게 퍼센트로 픽셀을 변환합니다.
45px은 100 % * 45px/16px =
281.25%이됩니다.
+1 감사합니다. 그들은 http://yuilibrary.com/yui/docs/cssfonts/cssfonts-size.html 여기에서 같은 방법을 사용하고 있습니까? 그들은 body { \t 글꼴 : 13px/1.231 arial, helvetica, clean, sans -가는 장식 선; \t * font-size : 작음;/* for IE */ \t * font : x-small;/* quirks 모드에서 IE의 경우 */ } ' –
잘못된 가정으로 시작하면 오류가 발생합니다. –
어떻게 px를 %로 변환하나요?
수 없습니다. 백분율은 부모 요소의 글꼴 크기의 비율이며 궁극적으로 (사용자가 <html> 요소에 도달 할 때) 사용자의 기호 (알 수없는 값)로 되돌아갑니다. 픽셀 크기는 픽셀 단위의 크기입니다 (DPI에 따라 다를 수 있음). 이 같은
는 그들 사용자의 기본 글꼴 크기가 무엇인지에 대해 가정을 http://pxtoem.com/
에 PX입니다. 이 가정은 종종 잘못 될 것입니다. 같은 가정을 확인하려면 100% (그리고 0.75em이 75% 등등과 동일)로
후 1em은 동일합니다.
직접 변환하지 않아도됩니다 ... 연결된 테이블에 백분율 값이 포함됩니다!
하지만 그건 26px까지만 있습니다. –
그냥 기본적인 곱셈입니다. – Quentin
필자는 이것을 한 번 사용했습니다. 나는 폰트 크기로 퍼센트를 넣고 "Computed"탭을 체크했다. 실제 문서에있는 것과 같으면이 백분율 값이 필요하다는 것을 알게되었습니다. 변환 자의 수가 적 으면 문서에서 px가 차지하는 비율이 어느 정도인지 알 수 있습니다. 별로 간단하지는 않지만 힘들지도 않습니다.
HTML 태그와 body 태그를 100 %로 설정하십시오. 그런 다음 비율을 사용하여 모든 크기를 설정하십시오. 이것은 이러한 태그와 관련이 있으며 완벽한 유체 레이아웃을 얻습니다.
은 %로 PX를 변환간단한 포뮬러는 TCR인 즉 T arget의 % C 타세 = R esult * 100
퍼센트 서체 화소 고정 콘텐츠 박스 모두에 적용이 수식 ~ 백분율 상자
글꼴 크기가 45px (대상)이고 내용 값이 글꼴 16 (내용)의 기본값을 넣을 수 있고 결과가 2.81이고 100을 곱하면 281.25가됩니다. 값 281 %를 반올림합니다.
대상/컨텍스트 = 결과 대상이 % 컨텍스트 = 결과 –
예 : 오른쪽에 이상 2
1,000분의 200 = 0.2 => 이동 소수점이 20 %의 폭을 잎하십시오 1000px 용기 내부에 200 픽셀 사업부의 비율의 폭을 찾기.
Ex2 : padding이 10px이고 요소 너비가 350px이고 모든 것이 1000px 컨테이너 내에있는 경우 div의 왼쪽 및 오른쪽 패딩을 백분율로 변환합니다. 여기서 우리는 전체 컨테이너를 무시합니다. 왜냐하면 우리는 패딩을 처리하기 때문에 컨텍스트가 350px이고 대상이 10px가됩니다. 그러면 왼쪽 및 오른쪽 패딩은
10/350 = 0이됩니다.02857142857142857 (모든 것이 수학적으로 완벽하다는 것을 확인하기 위해 전체 십진수를 유지하십시오) => 소수점 2를 오른쪽으로 이동하여 2.857142857142857 %의 왼쪽 및 오른쪽 패딩을 남겨 둡니다.
이것은 글꼴 크기와 관련이 있습니까? – Quentin
퍼센트를 강제하지 않고'em'으로 해결해야하는 것은 그들이 설계되지 않은 것을합니다. – progo
@progo - 당신은 맞습니다'em'은'62.5 %'기술을 사용하여 계산하기 쉽습니다. 그러나 문제는 중첩 된 요소와'62.5 %'에서 기본 글꼴 크기를'10px'로 작게 읽습니다. –