如何相对于视口调整元素的大小，同时“限制”它的最大和最小尺寸？

【问题标题】：How do I size an element relative to the viewport whilst also 'capping' it's max and min size?如何相对于视口调整元素的大小，同时“限制”它的最大和最小尺寸？
【发布时间】：2016-01-15 00:41:39
【问题描述】：

我在 p 标签中有一些文本，在我的 css 中有： p { 最小宽度：100px；最大宽度：400px 字体大小：24vw； }

我希望文本根据视口宽度改变大小，但限制为最小和最大宽度。

编辑： Here is a working example

【问题讨论】：

标签： css

【解决方案1】：

习惯了这个css

Demo

p { min-width: 100px; 
max-width: 400px;
 font-size: 24px; }

您的 css 中缺少一些内容 ...

【讨论】：

【解决方案2】：

要根据视口宽度设置动态字体大小，并限制元素的最大和最小宽度，请使用 max/min-width 属性设置宽度限制，并使用 'vw'(viewport-width) 属性获取相对于视口宽度的字体大小单位。

使用原始问题中所述的代码：

p { 
 min-width: 100px; 
 max-width: 400px 
 font-size: 24vw; 
}

我发布的原始代码运行良好，当时我只是没有什么代码经验。

Here is a working example

【讨论】：