Ich komme etwas spät hierher, ich bekomme nicht so viel Anerkennung dafür, ich mache nur eine Mischung der folgenden Antworten, weil ich gezwungen war, das für ein Projekt zu tun.
Um die Frage zu beantworten: Es gibt keine CSS-Eigenschaft . Ich weiß nicht warum, aber ich denke, es liegt daran, dass sie Angst vor einem Missbrauch dieser Eigenschaft haben, aber ich finde keinen Anwendungsfall, in dem es ein ernstes Problem sein kann.
Was auch immer, was sind die Lösungen?
Zwei Werkzeuge ermöglichen es uns , das zu tun: Medien - Anfragen am vw Immobilien
1) Es gibt eine "Narren" -Lösung, die darin besteht, für jeden Schritt, den wir in unserem CSS ausführen, eine Medienabfrage durchzuführen und die Schriftart von einem festen Betrag auf einen anderen festen Betrag zu ändern. Es funktioniert, aber es ist sehr langweilig und Sie haben keinen glatten linearen Aspekt.
2) Wie AlmostPitt erklärte, gibt es eine brillante Lösung für die Minima:
font-size: calc(7px + .5vw);
Das Minimum wäre hier 7px zusätzlich zu 0,5% der Ansichtsbreite.
Das ist schon richtig cool und funktioniert in den meisten Fällen . Es ist keine Medienabfrage erforderlich, Sie müssen nur einige Zeit damit verbringen, die richtigen Parameter zu finden.
Wie Sie bemerkt haben, handelt es sich um eine lineare Funktion. Die grundlegende Mathematik zeigt Ihnen, dass zwei Punkte bereits die Parameter enthalten. Legen Sie dann einfach die gewünschte Schriftgröße in px für sehr große Bildschirme und für mobile Versionen fest und berechnen Sie dann, ob Sie eine wissenschaftliche Methode durchführen möchten. Dachte, es ist absolut nicht notwendig und du kannst es einfach versuchen.
3) Nehmen wir an, Sie haben einen sehr langweiligen Kunden (wie ich), der unbedingt möchte, dass ein Titel eine Zeile und nicht mehr ist. Wenn Sie die AlmostPitt-Lösung verwendet haben, treten Probleme auf, da Ihre Schriftart weiter wächst und Sie einen Container mit fester Breite haben (z. B. Bootstrap, der bei 1140 Pixel stoppt, oder etwas in großen Fenstern). Hier empfehle ich Ihnen, auch eine Medienabfrage zu verwenden. Tatsächlich können Sie nur die maximale Pixelgröße ermitteln, die Sie in Ihrem Container verarbeiten können, bevor der Aspekt unerwünscht wird (pxMax). Dies wird Ihr Maximum sein. Dann müssen Sie nur noch die genaue Bildschirmbreite finden, die Sie stoppen müssen (wMax). (Ich lasse Sie eine lineare Funktion selbst invertieren).
Danach einfach machen
@media (min-width: [wMax]px) {
h2{
font-size: [pxMax]px;
}
}
Dann ist es perfekt linear und Ihre Schriftgröße wächst nicht mehr! Beachten Sie, dass Sie Ihre vorherige CSS-Eigenschaft (calc ...) nicht in eine Medienabfrage unter wMax einfügen müssen, da Medienabfragen als wichtiger angesehen werden und die vorherige Eigenschaft überschrieben wird.
Ich denke nicht, dass es nützlich ist, ein Snippet dafür zu erstellen, da Sie Probleme haben würden, es auf den gesamten Bildschirm zu schaffen, und es schließlich keine Raketenwissenschaft ist.
Ich hoffe, dies könnte anderen helfen, und vergessen Sie nicht, AlmostPitt für seine Lösung zu danken.