如何使响应字体大小/其他大小，但与像素完美？

提问者：小点点

我在Figma为不同的屏幕尺寸(手机，平板电脑和桌面)设计了一个网站。如何使字体大小在这些屏幕大小之间平滑变化，但在这些屏幕大小上字体大小必须与Figma中的大小相同？

同样的问题也适用于图标或图片的宽度/高度。如何在不同屏幕尺寸之间平滑更改其尺寸，但在某些屏幕宽度上具有像素完美的尺寸？

例如：屏幕尺寸：320 像素、768 像素和 1920 像素。字体大小：40px、76px、112px。但是在这些尺寸之间，它必须平稳地变化。

共2个答案

匿名用户

您可以使用完全响应的方式来声明字体大小。一种方法是使用font-size：clamp（value1， value2， value3）。

第一个值是最小值-字体大小永远不会低于您在此设置的值。

第二个值是首选值。该元素将尝试将字体大小设置为该值。

最后一个值是最大值。元素的字体大小永远不会超过这个。

至于设置值，我建议使用em、rem或vw-Unit以获得完全响应的效果。在font-size属性上使用em-Unit允许设置元素相对于其父元素字体大小的字体大小。当父元素的大小发生变化时，子元素的大小会自动更改。

阅读有关em的更多信息

玩弄一下价值观吧！尝试使用示例代码片段在“整页”选项卡中调整浏览器的大小，看看< code>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(MIN, IDEAL, MAX)
    */

    .text-class { 
      font-size: clamp(1rem, 2.5vw, 2rem);
    }

这决定了您当前观看设备的最佳可用大小。将其与媒体查询配对，您应该会有所帮助。