用一個值確定最大值和最小值

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; 
    } 
}