【NG例】通常のレスポンシブ対応方法例

ブロック要素の中身です。ブロック要素自体は可変でサイズ変更されますが、ブロック要素の高さは、文章に依存して比率を保持していません。

【完璧例】比率を維持しながら文字サイズも可変する対応方法

ブロック要素の中身です。ブロック要素自体も可変することができ、このテキストも一緒にサイズが可変することが確認頂けます。

1:1以外の比率固定でも可変させてみよう!

2:1

ブロック要素の中身です。ブロック要素自体も可変することができ、このテキストも一緒にサイズが可変することが確認頂けます。

1:2

ブロック要素の中身です。ブロック要素自体も可変することができ、このテキストも一緒にサイズが可変することが確認頂けます。

4:3

ブロック要素の中身です。ブロック要素自体も可変することができ、このテキストも一緒にサイズが可変することが確認頂けます。

高さ方向で常に中央揃えさせて可変させる

ブロック要素の中身です。テキストが常に中央揃えになっています。