Ale co jeśli kontener nie jest rzutnią (ciałem)?
To pytanie zadaje Alex w komentarzu pod przyjętą odpowiedzią .
Fakt ten nie oznacza, że nie vwmożna go w pewnym stopniu wykorzystać do wielkości tego pojemnika. Teraz, aby zobaczyć jakąkolwiek odmianę, trzeba założyć, że pojemnik w jakiś sposób ma elastyczny rozmiar. Czy poprzez bezpośredni procentwidth czy 100% minus marże. Punkt staje się „dyskusyjny”, jeśli kontener jest zawsze ustawiony na, powiedzmy, 200pxszeroki - wtedy wystarczy ustawić wartość, font-sizektóra działa dla tej szerokości.
Przykład 1
Jednak w przypadku kontenera o elastycznej szerokości należy zdać sobie sprawę, że w jakiś sposób pojemnik nadal jest wymiarowany poza okienkiem ekranu . W związku z tym chodzi o dostosowanie vwustawienia opartego na tej procentowej różnicy wielkości do rzutni, co oznacza wzięcie pod uwagę rozmiaru opakowań nadrzędnych. Weź ten przykład :
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;
}
Zakładając, że divjest to potomek body, ma on 50%tę 100%szerokość, która jest rozmiarem rzutni w tym podstawowym przypadku. Zasadniczo chcesz ustawić taki, vwktóry będzie ci dobrze wyglądał. Jak widać w moim komentarzu w powyższej treści CSS, możesz „przemyśleć” to matematycznie w odniesieniu do pełnego rozmiaru rzutni, ale nie musisz tego robić. Tekst będzie „wyginał się” z kontenerem, ponieważ kontener zgina się przy zmianie rozmiaru rzutni. AKTUALIZACJA: oto przykład dwóch pojemników różnej wielkości .
Przykład 2
Możesz pomóc w określeniu rozmiaru rzutni, wymuszając na tej podstawie obliczenia. Rozważ ten przykład :
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;
}
Rozmiary są nadal oparte na rzutni, ale w zasadzie są konfigurowane w oparciu o sam rozmiar kontenera.
Jeśli rozmiar kontenera zmieni się dynamicznie ...
Jeśli rozmiar elementu kontenera ostatecznie dynamicznie zmienia swój procentowy stosunek albo przez @mediapunkty przerwania, albo przez JavaScript, to bez względu na podstawowy „cel” trzeba będzie ponownie obliczyć, aby utrzymać tę samą „relację” do zmiany rozmiaru tekstu.
Weź przykład 1 powyżej. Jeśli divzmieniono na 25%szerokość za pomocą jednego @medialub JavaScript, to w tym samym czasie font-sizenależałoby dostosować zapytanie multimedialne lub JavaScript do nowego obliczenia 5vw * .25 = 1.25. Dzięki temu rozmiar tekstu byłby taki sam, jak w „szerokości” oryginału50% kontenera została zmniejszona o połowę w stosunku do rozmiaru rzutni, ale teraz została zmniejszona z powodu zmiany własnych obliczeń procentowych.
Wyzwanie
Gdy używana jest funkcja CSS3calc() , jej dynamiczne dostosowanie byłoby trudne, ponieważ ta funkcja obecnie nie działa do font-sizecelów. Więc nie możesz wykonać czystej regulacji CSS 3, jeśli twoja szerokość się zmienia calc(). Oczywiście niewielkie dostosowanie szerokości marginesów może nie być wystarczające, aby uzasadnić jakąkolwiek zmianę font-size, więc może nie mieć znaczenia.
font-size: 100%;oznacza 100% rozmiaru tekstu, który byłby (tj. ten, który odziedziczy po rodzicu). Domyślnie jest to 16 pikseli. Więc jeśli użyjesz 50%, będzie to rozmiar czcionki: 8px