web-dev-qa-db-fra.com

Comment implémenter max-font-size?

Je veux spécifier ma taille de police en utilisant vw, comme dans

font-size: 3vw;

Cependant, je veux aussi limiter la taille de la police à 36px. Comment puis-je obtenir l'équivalent de max-font-size, qui n'existe pas - est la seule option permettant d'utiliser des requêtes multimédia?

css3viewport-units
53
user663031

font-size: 3vw; signifie que la taille de la police sera de 3% de la largeur de la fenêtre. Ainsi, lorsque la largeur de la fenêtre est de 1200 pixels - la taille de la police sera de 3% * 1 200 pixels = 36 pixels.

Ainsi, une taille de police maximale de 36 pixels peut être facilement mise en œuvre à l'aide d'une requête multimédia unique pour remplacer la valeur de taille de police 3vw par défaut.

démo de Codepen (navigateur de redimensionnement)

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

Cela dit, utiliser les unités de fenêtre pour font-size de la manière ci-dessus est problématique, car lorsque la largeur de la fenêtre est beaucoup plus petite - disons 320px -, la taille de la police de rendu devient 0,03 x 320 = 9,6px, ce qui est très (trop). petit.

Afin de surmonter ce problème, je peux recommander l'utilisation d'une technique appelée Type de fluide AKA CSS Locks .

Un verrou CSS est un type spécifique de calcul de valeur CSS dans lequel:

  • il y a une valeur minimale et une valeur maximale,
  • et deux points d'arrêt (généralement basés sur la largeur de la fenêtre),
  • et entre ces points de rupture, la valeur réelle va linéairement du minimum au maximum.

( De cet article sur les verrous CSS qui explique également les calculs en détail.)

Supposons donc que nous voulions appliquer la technique ci-dessus de telle sorte que la taille de police minimale soit 16px pour une largeur de fenêtre d'affichage égale ou inférieure à 600px et qu'elle augmente linéairement jusqu'à atteindre un maximum de 32px avec une largeur de fenêtre d'affichage de 1200px.

Nous pourrions utiliser ce mixin SASS qui fait tout le calcul pour nous afin que le CSS ressemble à ceci:

/* 
     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
//  http://madebymike.com.au/writing/precise-control-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>

Démo Codepen

Lectures complémentaires

Contrôle précis sur la typographie sensible

Typographie sensible aux fluides avec le dimensionnement des fluides poly CSS

interpolation non linéaire en CSS

92
Danield

Une autre manière d’augmenter lentement la taille de la police, cela ne limitera pas la taille de police maximale, mais même sur des écrans très larges, elle aura une meilleure apparence. Ne répond pas à la question de manière parfaite, mais sa 1 ligne ...

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

Voici une autre idée. La fonction calc utilise un flottant double précision. Par conséquent, il présente une fonction de pas vers 1e18. Par exemple,

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

Cela correspondra aux valeurs 0px, 1024px, 2048px, etc. voir stylo https://codepen.io/jdhenckel/pen/bQNgyW

La fonction step peut être utilisée pour créer une valeur abs et min/max avec quelques astuces mathématiques. Par exemple

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

Étant donné que l'étape (z) est égale à zéro lorsque z <0 et un sinon.

juste une idée, pas très pratique, mais peut-être amusante à essayer.

4
John Henckel

À un moment donné, le font-size dépasse l'échelle 36px à droite, trouvez-le. En supposant que cela dépasse quand le width: 2048px:

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

Oui, malheureusement, vous devez utiliser les requêtes @media. J'espère que cela n'affecte rien.

3
Praveen Kumar Purushothaman