Ich möchte meine Schriftgröße vwwie in angeben

font-size: 3vw;

Ich möchte jedoch auch die Schriftgröße auf 36px beschränken. Wie kann ich das Äquivalent von erreichen max-font-size, das nicht existiert - ist die einzige Option, um Medienabfragen zu verwenden?

font-size: 3vw;bedeutet, dass die Schriftgröße 3% der Breite des Ansichtsfensters beträgt. Wenn die Breite des Ansichtsfensters 1200 Pixel beträgt, beträgt die Schriftgröße 3% * 1200 Pixel = 36 Pixel.

So kann eine maximale Schriftgröße von 36px einfach mithilfe einer einzelnen Medienabfrage implementiert werden, um den Standardwert für die 3vw-Schriftgröße zu überschreiben.

Codepen-Demo (Browsergröße ändern)

div {
  font-size: 3vw;
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>hello</div>

Update: Mit der neuen CSS min () Funktion können wir den obigen Code vereinfachen - ohne Medienabfragen zu verwenden ( caniuse )

div {
  font-size: min(3vw, 36px);
}

Im obigen Beispiel beträgt die Schriftgröße höchstens 36 Pixel, verringert sich jedoch auf 3 VW, wenn das Ansichtsfenster weniger als 1200 Pixel breit ist (wobei 3 VW einen Wert von weniger als 36 Pixel berechnet).

Die Verwendung von Ansichtsfenstereinheiten für font-sizedie oben beschriebene Weise ist jedoch problematisch, da bei einer viel kleineren Ansichtsfensterbreite (z. B. 320 Pixel) die gerenderte Schriftgröße 0,03 x 320 = 9,6 Pixel beträgt, was sehr (zu) klein ist.

Um dieses Problem zu lösen, kann ich die Verwendung einer Technik namens Fluid Type AKA CSS Locks empfehlen .

Eine CSS-Sperre ist eine bestimmte Art der CSS-Wertberechnung, bei der:

• es gibt einen minimalen Wert und einen maximalen Wert,
• und zwei Haltepunkte (normalerweise basierend auf der Breite des Ansichtsfensters),
• und zwischen diesen Haltepunkten geht der tatsächliche Wert linear vom Minimum zum Maximum.

Nehmen wir also an, wir möchten die obige Technik so anwenden, dass die minimale Schriftgröße 16 Pixel bei einer Ansichtsfensterbreite von 600 Pixel oder weniger beträgt und linear zunimmt, bis sie bei einer Ansichtsfensterbreite von 1200 Pixel ein Maximum von 32 Pixel erreicht.

Dies kann wie folgt dargestellt werden ( weitere Informationen finden Sie in diesem CSS-Trick-Artikel ):

div {
  font-size: 16px;
}
@media screen and (min-width: 600px) {
  div {
    font-size: calc(16px + 16 * ((100vw - 600px) / 600));
  }
}
@media screen and (min-width: 1200px) {
  div {
    font-size: 32px;
  }
}

Alternativ könnten wir dieses SASS-Mixin verwenden, das die gesamte Mathematik für uns erledigt, damit das CSS ungefähr so ​​aussieht:

/* 
     1) Set a min-font-size of 16px when viewport width < 600px
     2) Set a max-font-size of 32px when viewport width > 1200px and
     3) linearly increase the font-size from 16->32px 
     between a viewport width of 600px-> 1200px 
*/

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}

// ----
// libsass (v3.3.6)
// ----

// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//                                                                         
//
//  `strip-unit()` function by Hugo Giraudel
//  
//  11.08.2016 Remove redundant `&` self-reference
//  31.03.2016 Remove redundant parenthesis from output
//  02.10.2015 Add support for multiple properties
//  24.04.2015 Initial release
//
// =========================================================================

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

// Usage:
// ======

// /* Single property */
// html {
//   @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }

// /* Multiple properties with same values */
// h1 {
//   @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }

////////////////////////////////////////////////////////////////////////////

div {
  @include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
  div {
     font-size: 16px;
  }
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>Responsive Typography technique known as Fluid Type or CSS Locks. 
  Resize the browser window to see the effect.
</div>

Codepen Demo

Update: Wir können die neue CSS-Funktion clamp () ( caniuse ) verwenden, um den obigen Code einfach umzugestalten :

div {
  font-size: clamp(16px, 3vw, 32px);
}

siehe MDN :

Mit clamp () können Sie eine Schriftgröße festlegen, die mit der Größe des Ansichtsfensters wächst, jedoch nicht unter eine minimale Schriftgröße oder über eine maximale Schriftgröße fällt. Es hat den gleichen Effekt wie der Code in Fluid Typography, jedoch in einer Zeile und ohne Verwendung von Medienabfragen.

p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>

- -

Weiterführende Literatur

Flüssigkeitstypographie

Wie macht man die maximale Schriftgröße in CSS?

Fluid Responsive Typography mit CSS Poly Fluid Sizing

Nichtlineare Interpolation in CSS

Hier ist eine andere Idee. Die Calc-Funktion verwendet Float mit doppelter Genauigkeit. Daher zeigt es eine Sprungfunktion nahe 1e18. Zum Beispiel,

width: calc(6e18px + 100vw - 6e18px);

Dadurch werden die Werte 0px, 1024px, 2048px usw. erreicht. Siehe Stift https://codepen.io/jdhenckel/pen/bQNgyW

Die Schrittfunktion kann verwendet werden, um mit einigen cleveren Berechnungen abs-Werte und min / max zu erstellen. Zum Beispiel

max(x, y) = x - (x + y) * step(y - x)

Der gegebene Schritt (z) ist Null, wenn z <0 ist, und ansonsten Eins.

Nur eine Idee, nicht sehr praktisch, aber vielleicht macht es Spaß, sie auszuprobieren.

( Achtung: Diese Technik hängt von einem Implementierungsdetail ab, das in keiner Spezifikation enthalten ist. Derzeit funktioniert sie in Chrome und Safari, jedoch nicht in Firefox, Edge oder Internet Explorer, die keine Floats mit doppelter Genauigkeit für CSS-Werte verwenden.)

Auf andere Weise wird die Schriftgröße langsam erhöht. Dadurch wird die maximale Schriftgröße nicht eingeschränkt, aber selbst auf sehr breiten Bildschirmen sieht sie besser aus. Beantwortet die Frage nicht perfekt, aber es ist 1 Zeile ...

font-size: calc(16px + 1vw);

Update: CSS verbessert und ich empfehle die Verwendung der clamp(min, preferred, max)Funktion:

font-size: clamp(12px, 2vw, 20px);

Irgendwann font-sizeüberschreitet das die 36pxSkala rechts, finde das. Angenommen, es überschreitet, wenn die width: 2048px:

@media screen and (min-width: 2048px) {
  .selector {
     font-size: 36px;
  }
}

Ja, leider müssen Sie die @mediaAbfragen verwenden. Ich hoffe das hat keinen Einfluss.