基于容器宽度的字体缩放

本文翻译自：Font scaling based on width of container

I'm having a hard time getting my head around font scaling. 我很难理解字体缩放。

I currently have this site with a body font-size of 100%. 我目前有一个网站的正文font-size为100％。 100% of what though? 不过是100％ This seems to compute out at 16 pixels. 这似乎可以计算出16个像素。

I was under the impression that 100% would somehow refer to the size of the browser window, but apparently not because it's always 16 pixels whether the window is resized down to a mobile width or full blown widescreen desktop. 我给人的印象是100％会以某种方式引用浏览器窗口的大小，但是显然不是因为将窗口缩小到移动宽度还是全屏宽屏桌面总是16像素。

How can I make the text on my site scale in relation to its container? 如何使网站上的文本相对于其容器而言？ I tried using em , but this doesn't scale either. 我尝试使用em ，但这也无法扩展。

My reasoning is that things like my menu become squished when you resize, so I need to reduce the px font-size of .menuItem among other elements in relation to the width of the container. 我的理由是，当您调整大小时，菜单之类的东西会变得狭窄，因此我需要根据容器的宽度来减少.menuItem的px font-size 。 (For example, in the menu on a large desktop, 22px works perfectly. Move down to tablet width and 16px is more appropriate.) （例如，在大型桌面上的菜单中， 22px可以完美工作。向下移动至平板电脑宽度，则16px更合适。）

I'm aware I can add breakpoints, but I really want the text to scale as well as having extra breakpoints, otherwise I'll end up with hundreds of breakpoints for every 100 pixels decrease in width to control the text. 我知道我可以添加断点，但是我确实希望文本能够缩放以及具有额外的断点，否则我将每减少100像素的宽度就会得到数百个断点来控制文本。

#1楼

参考：https://stackoom.com/question/15N3H/基于容器宽度的字体缩放

#2楼

100% is relative to the base font size, which, if you haven't set it, would be the browser's user-agent default. 100％相对于基本字体大小，如果未设置，则为浏览器的用户代理默认值。

To get the effect you're after, I would use a piece of JavaScript code to adjust the base font size relative to the window dimensions. 为了获得想要的效果，我将使用一段JavaScript代码来相对于窗口尺寸调整基本字体大小。

#3楼

Inside your CSS, try adding this at the bottom changing the 320 pixels width for wherever your design starts breaking: 在CSS内，尝试将其添加到底部，以将320像素的宽度更改为您的设计开始中断的位置：

    @media only screen and (max-width: 320px) {

        body { font-size: 1em; }

    }

Then give the font-size in "px" or "em" as you wish. 然后根据需要在“ px”或“ em”中指定字体大小。

#4楼

EDIT: If the container is not the body CSS Tricks covers all of your options in Fitting Text to a Container . 编辑：如果容器不是正文， CSS Tricks将在“将文本适合容器”中涵盖您的所有选项。

If the container is the body, what you are looking for is Viewport-percentage lengths : 如果容器是主体，则您要查找的是视口百分比长度：

The viewport-percentage lengths are relative to the size of the initial containing block . 视口百分比长度相对于初始包含块的大小。 When the height or width of the initial containing block is changed, they are scaled accordingly. 更改初始包含块的高度或宽度时，将对其进行相应缩放。 However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. 但是，当根元素上的溢出值为auto时，则假定不存在任何滚动条。

The values are: 值是：

vw (% of the viewport width) vw （视口宽度的百分比）
vh (% of the viewport height) vh （视口高度的百分比）
vi (1% of the viewport size in the direction of the root element's inline axis) vi （在根元素的内联轴方向上的视口大小的1％）
vb (1% of the viewport size in the direction of the root element's block axis) vb （视口大小在根元素的块轴方向上的1％）
vmin (the smaller of vw or vh ) vmin （ vw或vh的较小者）
vmax (the larger or vw or vh ) vmax （较大或vw或vh ）

1 v* is equal to 1% of the initial containing block. 1 v *等于初始包含块的1％。

Using it looks like this: 使用它看起来像这样：

p {
    font-size: 4vw;
}

As you can see, when the viewport width increases, so does the font-size, without needing to use media queries. 如您所见，当视口宽度增加时，字体大小也会增加，而无需使用媒体查询。

These values are a sizing unit, just like px or em , so they can be used to size other elements as well, such as width, margin, or padding. 这些值是大小单位，就像px或em ，因此它们也可以用于调整其他元素的大小，例如宽度，边距或填充。

Browser support is pretty good, but you'll likely need a fallback, such as: 浏览器支持相当不错，但是您可能需要一个备用，例如：

p {
    font-size: 16px;
    font-size: 4vw;
}

Check out the support statistics: http://caniuse.com/#feat=viewport-units . 查看支持统计信息： http : //caniuse.com/#feat=viewport-units 。

Also, check out CSS-Tricks for a broader look: Viewport Sized Typography 另外，请查看CSS技巧以获得更广泛的外观： 视口大小的版式

Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography 这是一篇有关设置最小/最大尺寸以及对尺寸进行更多控制的好文章： 精确控制响应式排版

And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu 以下是有关使用calc（）设置大小以使文本填充视口的文章： http : //codepen.io/CrocoDillon/pen/fBJxu

Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. 另外，请查看这篇文章，该文章使用一种称为“熔化引导”的技术来调整行高。 Molten Leading in CSS 熔融领先CSS

#5楼

But what if the container is not the viewport (body)? 但是，如果容器不是视口（主体）怎么办？

This question is asked in comment by Alex under the accepted answer . 亚历克斯在已接受的答案下发表了评论。

That fact does not mean vw cannot be used to some extent to size for that container. 这个事实并不意味着vw在某种程度上不能用于该容器的大小。 Now to see any variation at all one has to be assuming that the container in some way is flexible in size. 现在要看到所有变化，必须假定容器在某种程度上具有灵活性。 Whether through a direct percentage width or through being 100% minus margins. 通过直接百分比width还是通过100％减去边距。 The point becomes "moot" if the container is always set to, let's say, 200px wide--then just set a font-size that works for that width. 如果容器始终设置为200px宽，则该点变为“模拟”，然后设置适合该宽度的font-size 。

Example 1 例子1

With a flexible width container, however, it must be realized that in some way the container is still being sized off the viewport . 但是，对于宽度可变的容器，必须认识到，在某种程度上，该容器的尺寸仍然超出视口 。 As such, it is a matter of adjusting a vw setting based off that percentage size difference to the viewport, which means taking into account the sizing of parent wrappers. 因此，要根据视口的百分比大小差异来调整vw设置，这意味着要考虑父包装的大小。 Take 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;
}

Assuming here the div is a child of the body , it is 50% of that 100% width, which is the viewport size in this basic case. 假设div是body的子级，则为该100%宽度的50% ，这是此基本情况下的视口大小。 Basically, you want to set a vw that is going to look good to you. 基本上，您想设置一个对您来说看起来不错的vw 。 As you can see in my comment in the above CSS content, you can "think" through that mathematically with respect to the full viewport size, but you don't need to do that. 正如您在上述CSS内容的评论中所看到的，您可以相对于整个视口大小在数学上“思考”，但是您不需要这样做。 The text is going to "flex" with the container, because the container is flexing with the viewport resizing. 文本将随着容器“弯曲”，因为容器随着视口的调整而弯曲。 UPDATE: here's an example of two differently sized containers . 更新：这是两个大小不同的容器的示例。

Example 2 例子2

You can help ensure viewport sizing by forcing the calculation based off that. 通过基于此强制进行计算，可以帮助确保视口大小。 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;
}

The sizing is still based off viewport, but is in essence set up based off the container size itself. 大小调整仍基于视口，但本质上是根据容器大小本身设置的。

Should Sizing of the Container Change Dynamically... 容器的尺寸应动态变化...

If sizing of the container element ended up changing dynamically its percentage relationship either via @media break points or via JavaScript, then whatever the base "target" was would need recalculation to maintain the same "relationship" for text sizing. 如果容器元素的大小最终通过@media断点或JavaScript动态更改其百分比关系，则无论基本的“目标”是什么，都需要重新计算以保持相同的“关系”以进行文本大小调整。

Take example #1 above. 以上面的示例1为例。 If the div was switched to 25% width by either @media or JavaScript, then at the same time, the font-size would need to adjust in either the media query or by JavaScript to the new calculation of 5vw * .25 = 1.25 . 如果通过@media或JavaScript将div切换为25%宽度，则同时， font-size将需要在媒体查询或JavaScript中调整为新的5vw * .25 = 1.25计算。 This would put the text size at the same size it would have been had the "width" of the original 50% container been reduced by half from viewport sizing, but has now been reduced due to a change in its own percentage calculation. 这将使文本大小与将原来的50%容器的“宽度”从视口大小减小一半时的大小相同，但由于其自身百分比计算的更改而现在减小了。

A Challenge 一个挑战

With the CSS3 calc() function in use, it would become difficult to adjust dynamically, as that function does not work for font-size purposes at this time. 使用CSS3 calc()函数时，动态调整将变得困难，因为该函数目前不适用于font-size 。 So you could not do a pure CSS 3 adjustment if your width is changing on calc() . 因此，如果您的宽度在calc()上更改，则无法进行纯CSS 3调整。 Of course, a minor adjustment of width for margins may not be enough to warrant any change in font-size , so it may not matter. 当然，对边距宽度的微小调整可能不足以保证font-size发生任何变化，因此可能没有关系。

#6楼

Try http://simplefocus.com/flowtype/ . 尝试http://simplefocus.com/flowtype/ 。 This is what I use for my sites, and it has worked perfectly. 这是我在网站上使用的，并且运行良好。

asdfgh0077

发布了0 篇原创文章 · 获赞 7 · 访问量 3万+

私信关注