基于容器宽度的字体缩放 [英] Font scaling based on width of container

问题描述

我很难把字体缩放。

我目前有此网站的主体 font-size 为100％。 100％的是什么？这似乎计算在16px。

我的印象是，100％会以某种方式引用浏览器窗口的大小，但显然不是因为它总是16px无论窗口是否调整为移动宽度或完全展开的宽屏桌面。

如何使我的网站上的文本与其容器相关？我尝试使用 em ，但这不会扩展。

我的推理是，当你调整大小，所以我需要减少的< font-size .menuItem 容器的宽度。 （例如，在大型桌面上的菜单中，22px工作得很好，向下移动到平板宽度和16像素更合适。）

我知道我可以添加断点，但我真的想让文本扩展为有额外的断点，否则我会最终有数百个断点为每100px减少的宽度来控制文本。

解决方案

您要查找的是Viewport百分比单位： http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

值为：'vw'（viewport宽度），'vh'（视口高度），'vmin'（vw或vh中的较小者），'vmax'（较大者或vw或vh）。

< 1 v == 1％的初始包含块

使用它看起来像这样：

  p {font-size：4vw;} 
  

这些值是像px或em一样的大小调整单位，因此它可以用来调整大小其他元素，如宽度，边距或填充。

浏览器支持是相当不错，但你可能需要一个后备。如：

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

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

此外，请查看更多外观的CSS技巧： http://css-tricks.com/viewport-sized-typography/

EDIT

这里有一篇有关设置最小/最大尺寸并对尺寸进行更多控制的好文章： http://madebymike.com.au/writing/precise-control-responsive-typography/

这里有一篇关于设置您的尺寸使用calc（），以便文本填充视口： http://codepen.io/CrocoDillon/pen/fBJxu

EDIT 2

另请参阅csstricks.com上的这篇文章它使用一种称为熔融引线的技术来调整线高度。 https://css-tricks.com/melten-leading-css/

I'm having a hard time getting my head around font scaling.

I currently have this site with a body font-size of 100%. 100% of what though? This seems to compute out at 16px.

I was under the impression that 100% would somehow refer to the size of the browser window, but apparently not because it's always 16px whether the window is resized down to a mobile width or full blown widescreen desktop.

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.

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. (E.g in the menu on a large desktop, 22px works perfectly. Move down to tablet width and 16px is more appropriate.)

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 100px decrease in width to control the text.

解决方案

What you are looking for is Viewport Percentage Units: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

The values are: ‘vw’ (viewport width), ‘vh’ (viewport height), ‘vmin’ (the smaller of vw or vh), ‘vmax’ (the larger or vw or vh).

1 v == 1% of the initial containing block

using it looks like this:

p {font-size: 4vw;}

As you can see, when the viewport width increases, so does the font-size, without media queries.

These values are a sizing unit just like px or em, so it can be used to size other elements as well, such was width, margin or padding.

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.

Also, check out CSS-tricks for a broader look: http://css-tricks.com/viewport-sized-typography/

EDIT

Here's a nice article about setting min/max sizes and exercising a bit more control over the sizes: http://madebymike.com.au/writing/precise-control-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

EDIT 2

Also, please view this article on csstricks.com which uses a technique dubbed 'molten leading' to adjust the line-height as well. https://css-tricks.com/molten-leading-css/

这篇关于基于容器宽度的字体缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！