그러나 컨테이너가 뷰포트 (본문)가 아닌 경우 어떻게해야합니까?
이 질문은 허용 된 답변 아래 Alex의 코멘트에 요청됩니다. .
그 사실은 vw해당 컨테이너의 크기를 어느 정도 사용할 수 없다는 것을 의미하지는 않습니다 . 이제 모든 변형을 확인하려면 컨테이너의 크기가 유연하다고 가정해야합니다. 직접 백분율을 width통해 또는 100 % 빼기 마진을 통해 여부 . 컨테이너가 항상 200px넓게 설정되어 있으면 포인트가 "부드럽게"됩니다 .font-size 너비에 맞는 .
실시 예 1
그러나 유연한 너비 컨테이너를 사용하면 어떤 식 으로든 컨테이너가 여전히 뷰포트에서 크기가 조정되고 있음을 알아야합니다 . 따라서 vw뷰포트에 대한 백분율 크기 차이에 따라 설정 을 조정 해야합니다. 이는 부모 래퍼의 크기를 고려한 것입니다. 이 예제를 보자 :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
(가) 여기에 가정 div의 자녀이며 body, 그것은이다 50%그의 100%기본적인 경우 뷰포트 크기 폭. 기본적으로, 당신 vw에게 잘 어울리는 것을 설정하고 싶습니다 . 위의 CSS 내용에서 내 의견에서 볼 수 있듯이 전체 뷰포트 크기와 관련하여 수학적으로 "생각"할 수는 있지만 그렇게 할 필요 는 없습니다 . 컨테이너가 뷰포트 크기 조정을 통해 구부러지기 때문에 텍스트가 컨테이너와 함께 "유연"합니다. 업데이트 : 다음은 서로 다른 크기의 두 컨테이너의 예입니다 .
실시 예 2
이를 기반으로 계산을 수행하여 뷰포트 크기 조정을 도울 수 있습니다. 이 예제를 고려하십시오 .
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
사이징은 여전히 뷰포트를 기반으로하지만 본질적으로 컨테이너 크기 자체를 기반으로 설정됩니다.
컨테이너 크기가 동적으로 변경되어야하는 경우 ...
컨테이너 요소의 크기가 @media중단 점 또는 JavaScript 를 통해 백분율 관계를 동적으로 변경 한 경우 텍스트 크기 조정에 대해 동일한 "관계"를 유지하려면 기본 "대상"이 무엇이든 재 계산이 필요합니다.
위의 예제 # 1을 보자. 는 경우 div로 전환되었다 25%중 하나에 의해 폭 @media또는 자바 스크립트, 다음, 동시에이 font-size새로운 계산에 어느 미디어 쿼리 또는 자바 스크립트에 의해 조정해야합니다 5vw * .25 = 1.25. 그러면 텍스트 크기가 원본의 "너비"와 같은 크기로 설정됩니다50% 컨테이너 뷰포트 크기 조정에서 절반으로 줄어들 되지만 이제 자체 백분율 계산의 변경으로 인해 감소되었습니다.
도전
함께 CSS3의 calc()기능을 사용, 그 기능이 작동하지 않는 동적으로 조정하기 어려워 질 것이다 font-size이 시간에 목적. 따라서 너비가 바뀌면 순수한 CSS 3 조정을 수행 할 수 없습니다 calc(). 물론 여백의 너비를 약간만 조정해도 변경 사항을 보증하기에 충분 font-size하지 않으므로 중요하지 않을 수 있습니다.
font-size: 100%;텍스트의 크기가 100 %임을 의미합니다 (즉, 부모로부터 상속받은 것). 기본적으로 16px입니다. 따라서 50 %를 사용하면 글꼴 크기 : 8px