大小响应基于动态的字符数量
我知道这可以用Javascript很容易地解决，但我只对纯粹的CSS解决方案感兴趣。
我想要一种动态调整文本大小的方式，以便它始终适合固定的div。 以下是示例标记：
<div style="width: 200px; height: 1em; overflow: hidden;">
<p>Some sample dynamic amount of text here</p>
</div>我刚发现这可以使用大众的单位。 它们是与设置视口宽度相关的单位。 有一些缺点，比如缺乏传统的浏览器支持，但这绝对是要认真考虑使用的东西。 另外，您仍然可以为旧版浏览器提供回退功能，例如：
p {
font-size: 30px;
font-size: 3.5vw;
}
http://css-tricks.com/viewport-sized-typography/和https://medium.com/design-ux/66bddb327bb1
CSS3支持与视图端口相关的新维度。 但是这在android <4.4中不起作用
3.2vmax = 3.2vw或3.2vh的较大值
body
{
font-size: 3.2vw;
}
请参阅css-tricks.com / ....并查看caniuse.com / ....
要么
使用媒体查询。最简单的方法是使用％或em中的维度。 只需更改基本字体大小，一切都会改变。
@media (max-width: @screen-xs) {
body{font-size: 10px;}
}
@media (max-width: @screen-sm) {
body{font-size: 14px;}
}
h5{
font-size: 1.4em;
}
以％或em为单位使用尺寸。 只需更改基本字体大小，一切都会改变。 在之前的版本中，您可以每次更改主体字体而不是h1，或者将字体大小设置为设备的默认设置，并全部保留在em中
请参阅kyleschaeffer.com / ....了解有关em，px和％
您可能对calc方法感兴趣：
font-size: calc(4vw + 4vh + 2vmin);
完成。 调整值直到符合你的口味。
来源：https：//codepen.io/CrocoDillon/pen/fBJxu
链接地址: http://www.djcxy.com/p/15335.html