基于容器宽度的字体缩放 - 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像素的宽度就会获得数百个断点来控制文本。

---

解决方案：

参考一： https://stackoom.com/question/15N3H/基于容器宽度的字体缩放
参考二： https://oldbug.net/q/15N3H/Font-scaling-based-on-width-of-container