３つの要素
レスポンシブウェッブに必須の３要素について、簡略な説明です。レスポンシブウェッブのテストとし３つのボックスを横に並べてみました。当サイトのマルチメディアによる表示に切り分けポイントを右の｢Window Size｣で確認出来ます。パソコン全画面使用時、横幅を狭くし行きWidthが｢768px｣以下になると、横に３列から３行の並びになります。尚、このページは、「Windows版 Safari」のＰＣ（横サイズ769以上）では、デザインが崩れます（当ページの横３列配置のＣＳＳに、display:flex使用のため）。
この頁「横3列のメディアクエリー」の説明頁 → 横３列・3要素
スタイルシートＣＳＳ２のメディアタイプ(Media Type)を拡張した機能でＣＳＳ３からメディアクエリーとして登場した。この新機能はウインドウの幅や解像度によって、スタイルシートの適用を切り替える事ができる。
ウェッブページをデザインするとき、ウィンドウサイズを決めて各要素を配置する手法グリッドデザインとウィンドウサイズに応じて各要素のサイズを伸縮させるリキッドレイアウトの手法を組み合わせたレイアウト手法のこと。
ウェッブページに画像を表示するとサーバーにアップした画像サイズで表示される。フルードグリッド手法では、画像のサイズを変えることが出来ない。それを補う手法がフルードイメージでこの指定を行う事で画像サイズを伸縮することが可能となる。