web-dev-qa-db-ja.com

max-font-sizeを実装するには？

次のように、vwを使用してフォントサイズを指定したい

font-size: 3vw;

ただし、フォントサイズを36pxに制限したいです。存在しないmax-font-sizeに相当するものを実現するにはどうすればよいですか？メディアクエリを使用する唯一のオプションですか？

css3viewport-units
53
user663031

font-size: 3vw;は、フォントサイズがビューポート幅の3％になることを意味します。したがって、ビューポートの幅が1200pxの場合、フォントサイズは3％* 1200px = 36pxになります。

したがって、36pxのmax-font-sizeは、単一のメディアクエリを使用して簡単に実装し、デフォルトの3vw font-size値をオーバーライドできます。

Codepenデモ （ブラウザーのサイズ変更）

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

そうは言っても、上記の方法でfont-sizeにビューポート単位を使用すると、ビューポートの幅がはるかに小さい場合（320pxなど）、レンダリングされるフォントサイズが0.03 x 320 = 9.6pxになり、非常に（あまりにも）小さい。

この問題を克服するために、 Fluid Type AKA CSS Locks と呼ばれる手法を使用することをお勧めします。

CSSロックは、特定の種類のCSS値計算です。

  • 最小値と最大値があり、
  • および2つのブレークポイント（通常はビューポートの幅に基づく）、
  • そして、これらのブレークポイント間では、実際の値は最小値から最大値まで直線的になります。

（ CSSロックに関するこの記事から これはまた、非常に詳細に含まれる数学を説明しています。）

したがって、最小フォントサイズがビューポート幅600px以下で16pxであり、ビューポート幅1200pxで最大32pxに達するまで線形に増加するように、上記の手法を適用するとします。

this SASS mixin を使用すると、CSSが次のようになるようにすべての計算が行われます。

/* 
     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>

Codepenデモ

参考文献

レスポンシブタイポグラフィの正確な制御

CSSポリ流体サイジングを使用した流体応答タイポグラフィ

CSSでの非線形補間

92
Danield

別の方法では、フォントサイズがゆっくりと増加します。これにより、最大フォントサイズが制限されることはありませんが、非常に広い画面でも、見栄えは良くなります。完璧な方法で質問に答えるわけではありませんが、その1行は...

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

別のアイデアがあります。 calc関数は、倍精度浮動小数点数を使用します。したがって、1e18付近でステップ関数を示します。例えば、

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

これは、値0px、1024px、2048pxなどにスナップします。ペンを参照してください https://codepen.io/jdhenckel/pen/bQNgyW

Step関数を使用して、abs値とmin/maxをいくつかの巧妙な数学で作成できます。例えば

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

与えられたstep（z）は、z <0の場合はゼロ、それ以外の場合は1です。

単なるアイデアであり、あまり実用的ではありませんが、試してみるのは楽しいかもしれません。

4
John Henckel

ある時点で、font-sizeが36pxスケールを超えた場合、それを見つけます。仮定すると、width: 2048px：

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

はい、残念ながら@mediaクエリを使用する必要があります。それが何の影響も与えないことを願っています。

3
Praveen Kumar Purushothaman