P粉3463260402023-10-09 19:09:57
This question was answered by Alex in 2507rkt3.
This fact does not mean that vw cannot be used to some extent to determine the size of this container. Now to see any changes we have to assume that the container is dimensionally flexible in some way. Either by direct percentagewidth or by 100% minus margins. This becomes "meaningless" if the container is always set to, say, 200px wide - then just set the font-size to fit that width.
Example 1
However, for containers with flexible widths, it is important to realize that the container still resizes to some extent based on the viewport. Therefore, the vw settings need to be adjusted based on the percentage size difference from the viewport, which means taking into account the size of the parent wrapper. Look at this example:
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;
}
Assume here that div is a child of body, which is 100% of 50% width, in this basic case Below is the viewport size. Basically, you want to set up a vw that looks good to you. As you can see in the comments above in the CSS content, you can mathematically "think" the entire viewport size, but you don't need to. The text will "bend" with the container because the container bends as the viewport is resized. Here are examples of two different sized containers.
Example 2
You can help ensure the viewport size by forcing calculations based on this. Consider this example:
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;
}
Dimensions are still based on the viewport, but are essentially set based on the container dimensions themselves.
Should the size of the container change dynamically...
If the container element's size ends up changing its percentage relationship dynamically via @media breakpoints or JavaScript, then whatever the underlying "goal" is, it will need to be recalculated to maintain the same "relationship" used to resize the text.
Take example #1 above. If you switch the div width to a 25% width via @media or JavaScript, then also font-size needs to be in the media query or Adjusted via JavaScript to fit the new calculation 5vw * .25 = 1.25. This will make the text the same size it was when the original 50% container's "width" was reduced in half from the viewport size, but now reduced by its own percentage calculation due to the change.
challenge
Using CSS calc() Function In use, dynamic adjustment becomes difficult, as this function currently cannot be used for font-size purposes. So if the width on calc() changes, pure CSS adjustments are not possible. Of course, a small adjustment to the margin width may not be enough to warrant any change to font-size, so it may not matter.
reply
0