问题:
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
来源:oschina
链接:https://my.oschina.net/u/4438370/blog/4312644