Tob*_*pen 89 html css fonts font-size
我正在尝试在div中制作一个响应浏览器窗口的字体.到目前为止,它已经完美地工作,但父div有一个max-width的525px.进一步调整浏览器大小不会使字体停止调整大小.这让我想知道是否存在这样的东西,min-font-size或者max-font-size如果这样的东西不存在,如果有办法实现类似的东西.
我认为使用百分比font-size可以工作,但文本位不会相应地缩放到父div.这就是我所拥有的:
父div的CSS:
.textField{
background-color:rgba(88, 88, 88, 0.33);
width:40%;
height:450px;
min-width:200px;
max-width:525px;
z-index:2;
}
有问题的文本的CSS:
.subText{
position:relative;
top:-55px;
left:15px;
font-family:"news_gothic";
font-size:1.3vw;
font-size-adjust:auto;
width:90%;
color:white;
z-index:1;
}
我在互联网上搜索了很长一段时间,但无济于事.
Alm*_*itt 94
您可以使用公式并包含视口宽度来完成此操作.
font-size: calc(7px + .5vw);
这会将最小字体大小设置为7px,并根据视口宽度将其放大.5vw.
祝好运!
小智 62
它适用于CSS.
我经历了同样的问题并修复如下.
在特定宽度及以上使用固定的"px"尺寸以获得最大尺寸.然后对于不同的较小宽度,使用相对"vw"作为屏幕的百分比.
下面的结果是它在960px以下的屏幕上自我调整,但保持固定大小.只是提醒一下,不要忘记在标题中添加html doc:
<meta name="viewport" content="width=device-width">
CSS中的示例:
@media all and (min-width: 960px) {
h1{
font-size: 50px;
}
}
@media all and (max-width: 959px) and (min-width: 600px) {
h1{
font-size: 5vw;
}
}
@media all and (max-width: 599px) and (min-width: 50px) {
h1{
font-size: 6vw;
}
}
我希望它会有所帮助!
我在这里来得有点迟了,我没有得到这么多的信任,我只是在混合下面的答案,因为我被迫为一个项目做到这一点.
所以回答这个问题:没有这个CSS属性.我不知道为什么,但我认为这是因为他们害怕滥用这个属性,但我找不到任何可能是一个严重问题的用例.
无论如何,解决方案是什么？
1)有一个"傻瓜"的解决方案,包括对我们在css中的每个步骤进行媒体查询,将字体从固定数量更改为另一个固定数量.它很有用,但它很无聊,而且你没有平滑的线性方面.
2)正如AlmostPitt所解释的那样,最小化有一个明智的解决方案:
font-size: calc(7px + .5vw);
除0.5%的视图宽度外,此处的最小值为7px. 在大多数情况下,这已经非常酷了.它不需要任何媒体查询,您只需花一些时间找到正确的参数.
正如您所注意到的那样,它是一个线性函数,基本数学会让您了解到两点已经找到了参数.然后只需要在非常大的屏幕和移动版本中修复px中的字体大小,然后计算是否要进行科学的方法.想,这绝对没有必要,你可以尝试.
3)假设你有一个非常无聊的客户(像我一样),他绝对希望标题成为一行而不是更多.如果你使用了AlmostPitt解决方案,那么你就会遇到麻烦,因为你的字体会不断增长,如果你有一个固定宽度的容器(比如1140px的bootstrap停止或大窗口的东西).在这里,我建议您也使用媒体查询.实际上,您可以在方面变得不需要之前找到容器中可以处理的最大px大小(pxMax).这将是你的最大值.然后你必须找到你必须停止的确切屏幕宽度(wMax).(我让你自己反转一个线性函数).
在那之后就做了
@media (min-width: [wMax]px) {
h2{
font-size: [pxMax]px;
}
}
然后它是完全线性的,你的字体大小停止增长!请注意,您不需要将先前的css属性(calc ...)放在wMax下的媒体查询中,因为媒体查询被认为是更重要的,它将覆盖以前的属性.
我不认为为此制作一个片段是有用的,因为你很难将它制作成整个屏幕而且它毕竟不是火箭科学.
希望这可以帮助别人,不要忘记感谢AlmostPitt的解决方案.
小智 7
CSS min() 和 max() 在 2020 年有相当好的使用率。
下面的代码使用 max() 获取 [variablevalue] 和 [minimumvalue] 中的最大值，然后将其传递给 min() 针对 [maximumvalue] 以获得两者中较小的一个。这将创建一个允许的字体范围（最小为 3.5rem，最大为 6.5rem，仅在两者之间时使用 6vw）。
font-size: min(max([variablevalue], [minimumvalue]), [maximumvalue]);
font-size: min(max(6vw, 3.5rem), 6.5rem);
我专门将它与 font-awesome 一起用作设置了最大宽度的引导容器元素中图像上的视频播放图标。
引用：
这两个属性允许网站或用户要求将元素的字体大小限制在这两个属性提供的范围内。如果计算值 font-size 超出 font-min-size 和 font-max-size 创建的边界，则 font-size 的使用值将被限制为这两个属性中指定的值。
这实际上将如下工作：
.element {
font-min-size: 10px;
font-max-size: 18px;
font-size: 5vw; // viewport-relative units are responsive.
}
这实际上意味着，字体大小将是视口宽度的 5%，但永远不会小于 10 像素，也永远不会大于 18 像素。
不幸的是，这个功能还没有在任何地方实现，（甚至在 caniuse.com 上也没有）。