その他レスポンシブ対応で使える技術
font-size: calc()
【CSSの記述例】
font-size: calc( 4 * ((100vw - 320px) / 1600) + 12px); 書き方: calc(フォントサイズの変化量 * ((100vw - 最小画面幅) / 最大画面幅) + 最小フォントサイズ) 言葉にすると: 最小画面幅320px(スマホなど想定)のとき→ 12px 最大画面幅1920pxのとき →16px(12px + 変化量4) 320px〜1920pxの間→ 12px〜16pxの間で等間隔に可変 ※ここでの「最大画面幅」は想定する最大画面幅(1920px)から最小画面幅(320px)を引いた数値を書きます。
画面幅(ビューポート)に合わせてフォントサイズが可変するようになります。
aspect-ratio
【CSSの記述例】
aspect-ratio: 16 / 9;
書き方:
16/9のところを、1/1や4/3など任意の割合に。
paddingハックの代わりです。アスペクト比を維持したまま画像をレスポンシブ対応させたいときに。