css 字体大小 vmax 和 vmin 一起没有覆盖/响应文本

Question

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

http://jsfiddle.net/Sc8gm/29/

<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

是的，有点。请参阅底部的 fiddle 。

您可以平滑响应曲线。

可以为 css/style 做这个:

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/