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