レスポンシブデザイン
ノートパソコンでページを作成し、見栄えが良いと思ったら、誰かがそれをスマートフォンで開く。注意深く配置したカラムが今は狭いスリバーに押しつぶされ、テキストは端からはみ出し、本来はないはずの水平スクロールバーが表示される。サイトの別のスマートフォン版を作成した人はいません。ページは1つで、380ピクセルのスマートフォンと1400ピクセルのモニターの両方で、すべてを重複して配信することなく見栄え良くする必要があります。その適応性がレスポンシブデザインであり、ほとんどは既に持っているツールから構築されます。
レスポンシブデザインの意味とビューポート
**レスポンシブ**ページは、どんな画面に表示されても、自分自身を変形させるのに適したページです。同じHTMLと同じCSSがスマートフォン、タブレット、デスクトップに対応し、何もはみ出さず、何も窮屈に感じないようにレイアウトが調整されます。3つのサイトを構築しているのではありません。曲がるサイトを1つ構築しているのです。
すべてが機能する前に、ブラウザはHTMLの中で1つの命令が必要です。スマートフォンはかつてデスクトップ幅のふりをして、ページ全体を縮小して適応させていました。そのため古いサイトは小さく、ズームアウトされたメスのように表示されていました。HTMLの<head>にある次の1行は、スマートフォンに代わりにその実際の幅を使用するよう指示しています：
<meta name="viewport" content="width=device-width, initial-scale=1" />これがないと、CSSは架空の広い画面をスタイリングしており、注意深くレイアウトされたものは機会を得られません。
流動的レイアウトを最優先に
本能的には特殊なスマートフォンルールをすぐに使用したくなりますが、多くのレスポンシブ性は1つのルールを書く前から無料で提供されます。**流動的**な値（スペースと共に伸び縮みするもの）で構築すると、レイアウトは既に適応しています。
ほとんどのボックスに2つの習慣が対応します。幅をパーセンテージとして設定して、ボックスが固定されたピクセル数ではなくそのコンテナのシェアを取得し、max-widthを使用して何かが小さい画面では縮小できますが、大きい画面では快適な読みやすさサイズを超えて成長することはありません：
.container {
width: 90%; /* 持っているスペースの90%を占める */
max-width: 60rem; /* しかし大きい画面では60remより広くならない */
margin: 0 auto; /* 中央揃え */
}スマートフォンではこのコンテナは狭い画面の90%です。モニターでは60remで成長を停止し、中央に配置されます。スマートフォンルールを書きませんでした。値が適応しました。
max-widthを使用してスマートフォンでは縮小して、モニターでは過度に拡大しないようにします。これら2つの値はレイアウトを自分で適応させます。流動的に構築すれば、次に来る電話固有のルールがはるかに少なくなります。 メディアクエリ
時々流動的な値は十分ではなく、レイアウトが実際に特定のサイズで変更される必要があります。例えば、スマートフォンでは垂直にスタックするメニューがデスクトップでは列に配置されるメニュー。それが**メディアクエリ**の目的です。設定した条件をスクリーンが満たすときのみ適用されるCSSブロック。
小さい画面のスタイルを通常のCSSとして開始し、より広い画面の変更をレイアウトするクエリを追加してください：
.nav {
display: flex;
flex-direction: column; /* 小さい画面ではスタック */
}
@media (min-width: 40rem) {
.nav {
flex-direction: row; /* スペースがあれば並べる */
}
}@media (min-width: 40rem)内のルールは、スクリーンが少なくとも40remの幅になると切り替わります。その下では、プレーンな.navルールが適用され、メニューはスタックします。
@media (min-width: ...)を使用してより大きい画面の変更を追加します。そのようにスマートフォンビューは開始点であり、その後付けパッチではありません。 ブレークポイントの選択
**ブレークポイント**は、メディアクエリが開始されレイアウトが変更される幅です。選択する誘惑的な方法は、人気のあるスマートフォンまたはタブレットの幅を調べてそれに一致させることです。これが罠です。数百のデバイスサイズがあり、毎年変更され、それらを追いかけることは勝つことができないゲームです。
より良い質問は、このレイアウトがどのような幅で見栄えが悪くなり始めるのかです。ブラウザを遅くゆっくり広げて見てください。テキストが長すぎて快適に読めなくなったり、2つのカラムが狭すぎたりする場合、それがブレークポイントが属する場所で、それが何番号であろうと関係なく。
/* ブレークポイントが選ばれたのはテキストがここで広すぎるために、 */
/* スマートフォンがこのサイズであるという理由ではなく */
@media (min-width: 45rem) {
.article { max-width: 38rem; }
}