2018年11月14日(水)

CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック

• 0
• 326
• 318
• 337

レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。

そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。
calc()を使用して、デスクトップやタブレットやスマホのそれぞれに最適なレイアウトを実装するテクニックを紹介します。

Use calc() to Change the Height of a Hero Component

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

calc()を使ったフォントサイズの可変

表示されるスクリーンのサイズに合わせてフォントを最適なサイズに変更するテクニック（Fluid Typography）は、2年程前に登場しま...