有这样的事情，最小字体大小和最大字体大小？
我正在试图在一个div中的一个字体响应浏览器窗口。 到目前为止，它已经完美的工作，但父div的max-width为525px 。 进一步调整浏览器的大小不会使字体停止resize。 这让我想知道是否存在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; }
我在互联网上search了很长一段时间，但无济于事。
不，没有最小或最大字体大小的CSS属性。 浏览器通常有一个最小字体大小的设置，但这是在用户的控制下，而不是作者。
您可以使用@media查询进行一些CSS设置，具体取决于屏幕或窗口宽度等内容。 在这种设置中，例如，如果窗口非常窄，则可以将字体大小设置为特定的小值。
它适用于CSS。
我经历了相同的问题，并按照如下方式修复。
在特定的宽度及以上使用固定的“px”尺寸来获得最大尺寸。 然后对于不同的较小宽度，使用相对“vw”作为屏幕的百分比。
下面的结果是，它调整自己在960像素以下的屏幕，但保持以上的固定大小。 提醒一下，不要忘记在头文件中添加html文档：
<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; } }
我希望这会有帮助！
您可以通过使用公式并包括视口宽度来完成此操作。
font-size: calc(7px + .5vw);
这将最小字体设置为7px，并根据视口宽度将其放大.5vw。
祝你好运！
背包很棒，但你不一定要求助于build立像Gulp或Grunt等工具。
我使用CSS自定义属性（CSSvariables）进行演示 ，轻松控制最小和最大字体大小。
像这样：
* { /* Calculation */ --diff: calc(var(--max-size) - var(--min-size)); --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */ } h1 { --max-size: 50; --min-size: 25; font-size: var(--responsive); } h2 { --max-size: 40; --min-size: 20; font-size: var(--responsive); }
我来这里迟了一点，我没有得到那么多的信贷，我只是在混合下面的答案，因为我被迫做一个项目。
所以要回答这个问题： 这个CSS属性没有这个东西 。 我不知道为什么，但是我想这是因为他们害怕这个属性被滥用，但是我没有发现任何可能成为严重问题的用例。
无论如何，解决scheme是什么？
两个工具将使我们能够做到这一点： 媒体查询 答复属性
1）有一个“傻瓜”的解决scheme，包括为我们在CSS中所做的每一个步骤进行媒体查询，将字体从固定数量改为另一个固定数量。 它的工作，但它是非常无聊，你没有一个光滑的线性方面。
2）正如AlmostPitt所解释的那样，对于最小值有一个明智的解决scheme：
font-size: calc(7px + .5vw);
这里的最小值是7px，除了视图宽度的0.5％。 在大多数情况下，这已经很酷了 。 它不需要任何媒体查询，你只需要花一些时间find正确的参数。
正如你注意到这是一个线性函数，基本的math知道你有两个点已经find你的参数。 然后，只需要在非常大的屏幕和移动版本中将字体大小固定在px中，然后计算是否要执行科学方法。 以为，这是绝对没有必要的，你可以通过尝试去。
3）假设你有一个非常无聊的客户（像我一样），他们绝对需要一个标题，而不是一个标题。 如果你使用AlmostPitt解决scheme，那么你遇到了麻烦，因为你的字体会不断增长，如果你有一个固定宽度的容器（比如bootstrap在1140px或者大窗口中停止）。 在这里，我build议你也使用媒体查询。 事实上，你可以findpx大小的最大值，你可以在你的容器中处理方面变得不需要（pxMax）之前。 这将是你的最大值。 那么你只需要find确切的屏幕宽度，你必须停止（wMax）。 （我让你自己反演一个线性函数）。
之后，就这样做
@media (min-width: [wMax]px) { h2{ font-size: [pxMax]px; } }
那么它是完美的线性和你的字体大小停止增长！ 请注意，您不需要将您以前的css属性（calc …）置于wMax下的媒体查询中，因为媒体查询被视为更重要，它将覆盖之前的属性。
我不认为为此做一个片段是有用的，因为你可能无法完成整个屏幕，这不是火箭科学。
希望这可以帮助别人，不要忘记感谢AlmostPitt的解决scheme。
我用这些得到了一些顺利的结果。 它在3个宽度范围之间stream畅地stream动，如连续的分段function。
@media screen and (min-width: 581px) and (max-width: 1760px){ #expandingHeader { line-height:5.2vw; font-size: 5.99vw; } #tagLine { letter-spacing: .15vw; font-size: 1.7vw; line-height:1.0vw; } } @media screen and (min-width: 1761px){ #expandingHeader { line-height:.9em; font-size: 7.03em; } #tagLine { letter-spacing: .15vw; font-size: 1.7vw; line-height:1.0vw; } } @media screen and (max-width: 580px){ #expandingHeader { line-height:.9em; font-size: 2.3em; } #tagLine { letter-spacing: .1em; font-size: .65em; line-height: .10em; } }
您可以使用Sass来控制最小和最大字体大小。 这是Eduardo Boucas的一个绝妙的解决scheme。
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) { $responsive-unitless: $responsive / ($responsive - $responsive + 1); $dimension: if(unit($responsive) == 'vh', 'height', 'width'); $min-breakpoint: $min / $responsive-unitless * 100; @media (max-#{$dimension}: #{$min-breakpoint}) { font-size: $min; } @if $max { $max-breakpoint: $max / $responsive-unitless * 100; @media (min-#{$dimension}: #{$max-breakpoint}) { font-size: $max; } } @if $fallback { font-size: $fallback; } font-size: $responsive; } .limit-min { @include responsive-font(3vw, 20px); } .limit-min-max { @include responsive-font(3vw, 20px, 50px); }
