用一个值确定最大值和最小值

Question

是否可以将CSS'calc()函数与视口大小一起用于确定属性的最大值和最小值，还是应该使用另一种方法来处理？

我设法得到某种类型的最大值或最小值，但不能同时满足某个值。以下是我如何为font-size财产设置大致32px的最小值。

.selector { 
    font-size: calc(32px + 2vw); 
} 

不幸的是，在巨大的分辨率下字体大小也会很大，看起来不会像预期的那么漂亮。当设置最大尺寸时反之亦然。这就是为什么我正在寻找一个解决方案，有助于设置属性的最大值和最小值。

上面的代码实际上非常接近我想要的，但我想知道你们是否找到了更好的方法。主要目标是使“选择器”大小约为小尺寸和大尺寸大小的包装器的1/4。考虑包装，选择什么元素具有以下属性的父元素：

.wrapper { 
    width: 100%; 
    margin: 0 auto; 
    padding: 0 40px; 
    max-width: 1200px; 
    box-sizing: border-box; 
} 

Answer 1

您需要设置与媒体查询视口中，有设置MAX-字号可惜没自动化的方式。

.selector { 
    font-size: calc(32px + 2vw); 
} 



@media (min-width: 900px) { 
    .selector { 
     font-size: 70px; 
    } 
} 

@media (max-width: 400px) { 
    .selector { 
     font-size: 40px; 
    } 
}