女性向けエンジニアスクール
狭いほうを土台にする
CSSレイアウト入門 / 全 5 枚
まず狭い画面ぶんを書いて広い側を足す
土台にはスマホの見た目だけを書き、広い画面で足したいものだけをメディアクエリの中に入れます。この書き方をモバイルファーストと呼びます。
.site-nav ul {
flex-direction: column;
column土台はスマホの見た目}
@media (min-width: 600px) {
.site-nav ul {
flex-direction: row;
row広い画面のときだけ上書き }
}
.site-nav ul {
flex-direction: column;
土台はスマホの見た目
}
@media (min-width: 600px) {
.site-nav ul {
flex-direction: row;
広い画面のときだけ上書き
}
}
逆の順番だと、スマホ用に打ち消す指定がどんどん増えます。打ち消しではなく上書きにすると、どちらの見た目も読む場所が1か所ずつに決まります。
1 / 5
← → キーでも送れます