是否有可能在一个css夹内设置一个固定值,以使字体大小不是在最小视区宽度和最大视区宽度之间进行zoom ,而是介于最小和最大之间,而在这两个断点之间.

这显然可以通过媒体查询来完成,但为了减少代码量,我想知道是否可以使用CLAMP来完成.

最小视区680px;最大视区1020px;

clamp(20px, -- 28px when > min viewport && < max viewport -- , 40px); 

推荐答案

通过嵌套clamp()个是可能的,但不是直观的

h1 {
  /* first breakpoint*/
  --w1: 1020px;
  /* second breakpoint*/
  --w2: 680px;
  
  font-size:
    clamp(clamp(                20px,  /* < w2 */
       (100vw - var(--w2))*1000,28px), /* > w2 && < w1 */
       (100vw - var(--w1))*1000,40px); /* > w1 */
}
<h1>a title</h1>

如果您想了解更多细节,我在本文中使用的是类似的技巧:https://css-tricks.com/responsive-layouts-fewer-media-queries/

Css相关问答推荐

与Chrome和Edge相比,背景位置动画在Firefox中运行并不流畅

如何使重复线性渐变适合字体大小?

如何将另一种自定义位置 colored颜色 添加到三角形CSS中?

是否可以在元素之间对齐渐变?

2 列 UL,右列中的列表项数量为奇数?

我怎样才能让我所有的网格列的高度等于最短列的高度

在 dbc.Container 上方包含横幅 - Dash

使用 :checked 显示隐藏的侧面板

父母是内联块,子元素有%填充=奇怪的行为

子菜单的背景不占用所有空间

带有图像的 CSS 网格在 Firefox 中表现不同

如何将 Google 字体链接到我的 Nuxt 文件?

在所有移动设备中禁用滚动

你能用 JavaScript 控制 GIF 动画吗?

使用 JavaScript 将 CSS 添加到 ?

Angular Material 中的样式垫 Select

如何将页脚保持在屏幕底部

如何让 Firefox 在文件更改时自动刷新?

IE划掉伪元素CSS?

如何重置或覆盖 IE CSS 过滤器?