我很难理解字体缩放.
我目前有这个网站的身体font-size
100%.但是100%的是什么?这似乎计算在16px.
我的印象是,100%会以某种方式引用浏览器窗口的大小,但显然不是因为它总是16px,无论窗口是否调整为移动宽度或完整的宽屏桌面.
如何使我的网站上的文本与其容器相关?我尝试过使用,em
但这也没有扩展.
我的理由是,事情就像我的菜单中就当调整压扁,所以我需要减少PX px
的font-size
相对其它元素的容器的宽度之中.(例如,在大型桌面上的菜单中,22px可以完美运行.向下移动到平板电脑宽度,16px更合适.)
我知道我可以添加断点,但我真的希望文本可以扩展为具有额外的断点,否则我将最终为每100px宽度减少数百个断点来控制文本.
我需要将用户输入的文本显示为固定大小的div.我想要的是自动调整字体大小,以便文本尽可能填充框.
所以 - 如果div是400px x 300px.如果有人输入ABC,那么它真的很大.如果他们输入一个段落,那么它将是一个很小的字体.
我可能想要从最大字体大小开始 - 可能是32px,虽然文本太大而不适合容器,但缩小字体大小直到它适合.
我知道这可以通过Javascript轻松解决,但我只对纯CSS解决方案感兴趣.
我想要一种动态调整文本大小的方法,以便它始终适合固定的div.以下是示例标记:
<div style="width: 200px; height: 1em; overflow: hidden;">
<p>Some sample dynamic amount of text here</p>
</div>
Run Code Online (Sandbox Code Playgroud)
我想也许这可以通过在ems中指定容器的宽度,并使字体大小继承该值来实现?