Определить максимум и минимум с одним значением

Question

Возможно ли использовать функцию CSS 'calc() вместе с размерами видовых экранов для определения максимального и минимального значения для свойства или использовать другой подход для этого?

Мне удалось получить какой-то макс или мин, но не оба для определенного значения. Вот как я установил минимальное значение примерно 32px для свойства font-size.

.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

Вы должны установить видовой экран с запросами средств массовой информации, нет автоматического способа установить макс-FontSize, к сожалению.

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



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

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