モバイルファーストのアプローチ、メディアクエリ、rem・%・vw 単位を使って、インターフェースをあらゆる画面サイズに適応させましょう。
このレッスンを Kodokon で開くプロのアプローチはモバイルファーストです。まず小さな画面向けのスタイルを書き、それから min-width のメディアクエリを使って空間が増えるにつれてレイアウトを充実させます。ベースのCSSはシンプルなまま保たれ、各ブレークポイントは実際に変わる部分だけを追加します。
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.cards {
grid-template-columns: repeat(3, 1fr);
}
}単位については、タイポグラフィにピクセルを使うのは禁止です。1rem はルート要素のフォントサイズ(デフォルトで16px)に等しく、そして何より、ユーザーがブラウザで選んだテキストサイズの設定を尊重します。フォントを20pxに設定した視覚障害のあるユーザーは、サイト全体が比例して拡大するのを目にします。ただし rem を使っていればの話です。
h1 {
font-size: 2.5rem;
}
p {
font-size: 1rem;
}
.section {
padding: 4rem 1.5rem;
}幅については、相対単位を組み合わせましょう。親の一部分を占めるための %、大きな画面で上限をかけるための max-width、ビューポート幅に連動したサイズのための vw(1vw はその1%に等しい)です。clamp(最小, 理想, 最大) 関数は、メディアクエリなしで適応する流動的な値を作ります。大きな見出しに最適です。
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.hero-title {
font-size: clamp(2rem, 5vw, 3.5rem);
}@media (max-width: 768px)@media (min-width: 768px)@media (device: desktop)1rem は何に対応しますか?50vw は何に等しいですか?