글꼴 크기 조정 문제를 이해하는 데 어려움을 겪고 있습니다.
현재 본문 텍스트가 100%인 웹사이트를 운영하고 있습니다 font-size
. 100% 그런데 뭐? 이는 16픽셀로 계산된 것으로 보입니다.
저는 100%가 브라우저 창의 크기를 참조하는 것이라는 인상을 받았지만 분명히 그렇지 않습니다. 창 크기가 모바일 너비로 조정되거나 전체 와이드스크린 데스크탑으로 조정되는지 여부에 관계없이 항상 16픽셀이기 때문입니다.
컨테이너를 기준으로 웹사이트 규모의 텍스트를 만드는 방법은 무엇입니까? em
를 사용해 보았으나 확장되지 않습니다.
내 추론은 내 메뉴와 같은 항목의 크기를 조정하면 찌그러지기 때문에 .menuItem
.menuItem
的 px
font-size
以及其他与容器宽度相关的元素。 (例如,在大桌面上的菜单中,22px
效果很好。向下移动到平板电脑宽度,16px
의 px
및 컨테이너 너비 관련 요소가 있는 다른 항목을 줄여야 한다는 것입니다. (예를 들어 대형 데스크탑의 메뉴에서는 22px
가 잘 작동합니다. 태블릿 너비로 내려오면 16px
가 더 적합합니다.)
중단점을 추가할 수 있다는 것을 알고 있지만 추가 중단점이 있는 것처럼 텍스트의 크기를 멋지게 조정하고 싶습니다. 그렇지 않으면 텍스트 너비를 제어하는 100픽셀마다 수백 개의 중단점이 생길 것입니다.
이 질문은 2507rkt3에서 Alex님이 답변하셨습니다.
이
vw
不能在某种程度上用于确定该容器的大小。现在要看到任何变化,我们必须假设容器在某种程度上是尺寸灵活的。无论是通过直接百分比宽度
还是通过100%减去边距。如果容器总是设置为,比方说,200px 宽,那么这一点就变得“没有意义”——然后只需设置适合该宽度的font-size
를 의미하는 것은 아닙니다. p>예 1
그러나 너비가 유연한 컨테이너의 경우 뷰포트에 따라 컨테이너의 크기가 여전히 조정된다는 점을 인식하는 것이 중요합니다. 따라서 설정은 뷰포트와의 크기 차이 백분율을 기준으로 조정되어야 하며, 이는 상위 래퍼의 크기를 고려함을 의미합니다.
을 설정하고 싶습니다. 위 CSS 콘텐츠의 주석에서 볼 수 있듯이 전체 뷰포트 크기를 수학적으로 "생각"할 수 있지만 반드시 그럴 필요는 없습니다. 뷰포트의 크기가 조정되면 컨테이너가 구부러지기 때문에 텍스트가 컨테이너와 함께 "구부려집니다".vw
이 예를 보세요: 으아아아 여기서div
가body
의 하위이고 이 경우100%
의50%
너비라고 가정합니다. 기본적으로 뷰포트 크기입니다. 기본적으로 자신에게 어울리는다음은 두 가지 크기가 다른 용기의 예입니다
예 2div
是body
的子级,它是100%
的50%
宽度,在这种基本情况下是视口大小。基本上,您想要设置一个对您来说看起来不错的vw
.이를 기반으로 계산을 강제하면 뷰포트 크기를 보장하는 데 도움이 될 수 있습니다.
이 예를 고려해보세요 : 으아아아 크기는 여전히 뷰포트를 기반으로 하지만 본질적으로 컨테이너 크기 자체를 기반으로 설정됩니다.
컨테이너의 크기가 동적으로 변경되어야 하는지...
컨테이너 요소의 크기가 @media 중단점 또는 JavaScript를 통해 동적으로 백분율 관계를 변경하는 경우 기본 "목표"가 무엇이든 텍스트 크기를 조정하는 데 사용된 것과 동일한 "관계"를 유지하기 위해 다시 계산해야 합니다.
위의 예 #1을 살펴보세요. 전달된 경우컨테이너의 "너비"는 뷰포트 크기에서 절반으로 줄어들 때 동일한 크기이지만 이제 변경으로 인해 자체 백분율 계산이 줄어듭니다.
@media
或 JavaScript 将div
宽度切换为25%
宽度,则同时font-size
需要在媒体查询中或通过 JavaScript 进行调整,以适应新的计算结果5vw * .25 = 1.25
。这将使文本大小与原始50%
도전CSS
calc()
函数 在使用中,动态调整会变得困难,因为该函数目前无法用于font-size
目的。因此,如果calc()
上的宽度发生变化,则无法进行纯 CSS 调整。当然,对边距宽度的微小调整可能不足以保证对font-size
를 사용하여 변경하면 문제가 되지 않을 수 있습니다.컨테이너 쿼리는 사용 사례에 따라 아마도 현재 가장 좋은 옵션일 것이며 모든 주요 브라우저에서 지원됩니다. 여기에서 지원 수준을 확인하세요: https://caniuse.com/mdn-css_properties_container
이제 쉽게 제어할 수 있습니다