Bestimmen Sie ein Maximum und Minimum mit einem Wert

Question

Ist es möglich, CSS 'calc() Funktion zusammen mit Ansichtsfenstergrößen zu verwenden, um ein Maximum und Minimum für eine Eigenschaft zu bestimmen, oder sollte ich einen anderen Ansatz dafür verwenden?

Ich habe es geschafft, eine Art von Max oder Min zu bekommen, aber nicht beide für einen bestimmten Wert. Hier ist, wie ich einen Mindestwert von etwa 32px für die font-size Eigenschaft festlegen.

Leider wäre bei enormen Auflösungen die Schriftgröße auch enorm, was nicht so schön aussehen würde wie erwartet. Umgekehrt bei der Einstellung einer maximalen Größe. Deshalb suche ich nach einer Lösung, die hilft, einen maximalen und einen minimalen Wert für die Eigenschaft festzulegen.

Der Code oben ist eigentlich ziemlich nah an dem, was ich will, aber ich würde gerne wissen, ob Sie einen besseren Ansatz gefunden haben. Das Hauptziel besteht darin, den "Selektor" auf etwa 1/4 des Wrappers zu bringen, sei es bei kleinen oder großen Auflösungen. Betrachten Sie das Wrapper, ein übergeordnetes Element des Auswahlelementes, was die folgenden Eigenschaften hat:

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

Answer 1

Sie benötigen das Ansichtsfenster mit Medienanfragen zu setzen, gibt es keine automatisierte Möglichkeit, max-Schrift leider zu setzen.

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



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

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