• 104505

    文章

  • 803

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

基于容器宽度的字体缩放 - 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. 我的理由是,当您调整大小时,菜单之类的东西会变得狭窄,因此我需要根据容器的宽度来减少.menuItempx 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

695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客