css 使用clamp()时字体大小不变[重复]

1sbrub3j  于 2023-03-14  发布在  其他
关注(0)|答案(2)|浏览(194)

此问题在此处已有答案

CSS clamp() formula for font-size(2个答案)
19小时前关门了。
我刚发现clamp,想用它来设置字体大小。我想最小值为.8rem,移动的版。然后1 rem为理想大小,然后1.25rem当屏幕变大。但字体大小没有改变,在所有当我重新调整屏幕大小。
我尝试了钳(10px,15px,20px),它也不工作。

*{
      margin: 0;
    }
    body{
      background-color: rgb(118, 120, 245);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .container{
      background-color: white;
      width: 60%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    p{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: clamp(1rem, .8rem, 1.5rem);
    }
<div class="container">
    <p>A Message You Would Like To Pass</p>
    <input type="text">
    <button>Submit</button>
    <p>Last Message Delivered!</p>
    <p>Hello World</p>
  </div>
w8f9ii69

w8f9ii691#

它的更好的钳(移动的,标准,桌面)输入值为移动和桌面。然后改变中间值根据情况。

font-size:clamp(15px, 1.5vw, 20px);
egmofgnx

egmofgnx2#

该函数有三个参数:最小值、优选值和最大允许值。
所以如果你的第一个值(1雷姆)比中间的值(Ideo 8雷姆)高,它就不起作用了。
我想你想要的是

font-size: clamp(12px, (Set value here)vw, 20px);

顺便说一句,使用px作为第一个和最后一个值。

相关问题