レスポンシブ

headerをメディアクエリを使わずに、スマホサイト(デバイス)に合わせてフレキスブルレイアウトにする方法

メディアクエリを使って、横幅を指定することはできますが、できるだけメディアクエリも使わずに、横幅をデバイスに合わせてフレキシブルに調整するCSSを紹介します。

例えばPCで見たときに、横幅が960pxのheaderがあったとします。

header {
width: 960px;
}

これをレスポンシブ対応のフレキシブルレイアウトにするには、「横幅はデバイスの横幅に合わせるけど、広げすぎても最大で960pxより大きくはならないよ」というCSSを記述すれば良いです。

それには次のように記述します。

header {
width: 100%;
max-width: 960px;
}

すると、デバイスに合わせてheaderの横幅が変化するので便利ですよ。お試しあれ!