我在Figma中为不同的屏幕尺寸(手机，平板电脑和台式机)设计了一个站点。如何使字体大小在这些屏幕大小之间平滑地变化，但在这些屏幕大小的字体大小必须与Figma相同?
同样的问题也适用于图标或图片的宽度/高度。如何在不同屏幕尺寸之间平滑地改变其尺寸，但在某些屏幕宽度上具有像素完美的尺寸?
例如:屏幕尺寸:320px、768px和1920px。字体大小:40px, 76px, 112px。但在这些尺寸之间，它必须平滑地变化。
您可以使用完全响应的方式来声明您的字体大小。一种方法是使用font-size: clamp(value1, value2, value3)。
第一个值是最小值Value - font-size永远不会低于你在这里设置的值。
第二个值是首选的价值。元素将尝试将font-size设置为此值。
最后一个值是最大值价值。元素的字体大小永远不会超过这个值。
对于数值的设置，我建议使用em、rem或vw单元，以获得完全响应的效果。在font-size属性上使用em-unit可以设置元素相对于其父元素的字体大小。当父元素的大小改变时，子元素的大小也会自动改变。
阅读更多关于em&rem上的font-size-property:https://www.geeksforgeeks.org/difference-between-em-and-rem-units-in-css/
稍微调整一下数值!尝试使用示例代码片段在完整页面选项卡中调整浏览器的大小，并查看clamp()的强大效果。但是，您可能需要一些媒体查询来达到您想要的效果。
body {
width: 800px;
font-size: 40px;
}
div {
width: 50%;
font-size: clamp(0.5em, 8vw, 8em);
}<body>
<div>
Resize the browser window to see the full effect of how powerful clamp is.
</div>
</body>使用CSS属性clamp
/*
clamp(MIN, IDEAL, MAX)
*/
.text-class {
font-size: clamp(1rem, 2.5vw, 2rem);
}
这决定当前观看设备的最佳可用大小。将其与媒体查询配对，您应该处于有利地位。