記事内に商品プロモーションを含む場合があります
メディアクエリを使って、横幅を指定することはできますが、できるだけメディアクエリも使わずに、横幅をデバイスに合わせてフレキシブルに調整するCSSを紹介します。
例えばPCで見たときに、横幅が960pxのheaderがあったとします。
header {
width: 960px;
}
これをレスポンシブ対応のフレキシブルレイアウトにするには、「横幅はデバイスの横幅に合わせるけど、広げすぎても最大で960pxより大きくはならないよ」というCSSを記述すれば良いです。
それには次のように記述します。
header {
width: 100%;
max-width: 960px;
}
すると、デバイスに合わせてheaderの横幅が変化するので便利ですよ。お試しあれ！
