Question

有没有办法在同一个元素上一起使用vmax和vmin，这样我就可以制作一个阻止它变小或变大的范围？当我只使用一个时，它会变大或变小，我试图限制它的两侧的极端。这适用于响应式设计。

<p>Here is some paragraph text at 3 vmin</p>
<h1>Here is some paragraph text at 3 vmin</h1>
<style>
    p {font-size: 3vmax;}
    h1 {font-size: 3vmin;font-size:4vmax;}
</style>

Answer 1

使用两个font-sizing属性定义没有意义。最后一个会覆盖你的第一个。要回答您的问题，没有max-font-size属性：

与流体图像一样，响应式文本的功能是双刃的：在极端屏幕尺寸下，使用vw和vh单位缩放的英雄文本完全有可能变得太大或太小。遗憾的是，没有max-font-size属性可以控制这种行为，尽管CSS3 min（）和max（）函数在浏览器支持后会很好地填充该角色。

source

Answer 2

是的，有点。参见底部的小提琴。

您可以平滑响应曲线。

可以针对CSS /样式执行此操作：

font-size: calc(3 * (0.5vw + 0.5vh));

也可以在html或文档CSS或样式正文中执行此操作：

--size: calc(0.5vmax + 0.5vmin);

，然后在css或元素样式中使用您要更改的变量，并按3.0 *之类的初始数字设置缩放比例：

font-size: calc(3.0 * var(--size));

通过这种方法，您可以将响应曲线与每个元素的相对大小分开重新定义，并且每个元素只有一个缩放比例，更易于阅读。

为简单起见，注意（0.5vw + 0.5vh）与（0.5vmin + 0.5vmax）具有相同的作用。

此外，您可以不同地增加或减少每个重要性。（0.2vmin + 0.8vmax）对窗口最小的一侧响应较弱，但对窗口最大一侧的响应较强，因此，当窗口变得较小时，文本不会变得太小，而当窗口太大时，文本可能会变得太大。或者，您可以仅减少对窗口特定侧的依赖性，因此（0.2vh + 0.8vw）在y轴缩小时（例如，当android键盘弹出时）将缩小文本缩放比例，但在宽屏幕上可能会变得过大（即使常见吗？）。

var和calc浏览器的兼容性非常好（请参阅底部）：https://developer.mozilla.org/en-US/docs/Web/CSS/calc

其他本机css命令（例如max / min / clamp）远不兼容。

https://jsfiddle.net/xsmhcpL4/

css fontsize vmax＆amp; vmin在一起没有覆盖/响应文本

2 个答案: