レスポンシブナレッジポイント

レスポンシブ

レスポンシブレイアウトのコンセプト

2010年5月に有名な外国のウェブデザイナーであるイーサン・マルコットによって提案されました

ページのデザインと開発は、ユーザーの行動とデバイス環境（システムプラットフォーム、画面サイズ、画面の向きなど）に応じて対応し、調整する必要があります。

テクニカルポイント

ラベル設定

<meta name = "viewport" content = "width = device-width、initial-scale = 1、maximum-scale = 1、user-scalable = no"> 
<！-可能であれば、chomeカーネル以降のバージョンのIEを呼び出しますkernel-> 
<meta http-equiv = "X-UA-Compatible" content = "IE = edge、chrome = 1"> 
<！-ビューポートをサポートしないデバイスと互換性があります（Meizu）-> 
<meta name = "HandheldFriendly" content = "true">

メディアクエリを使用して、対応するスタイルを適応させます

ターゲットユーザーのアクセスデバイスの主なタイプに応じて3つまたは4つのレイアウトを作成し、それぞれスタイルのセットを設定します。

モバイルの優先度：
/ *超小型デバイス（携帯電話、768px未満）* / 
@media screenおよび（min-width：768px）{...} / *小型デバイス（タブレット、768px以上）* / 
@media screen and （min-width：992px）{...} / *中型デバイス（デスクトップコンピューター、992px以上）* / 
@media screenおよび（min-width：1200px）{...} / *大規模デバイス（大型デスクトップコンピューター、1200px以上）* /
大画面優先度：
/ *大型デバイス（大型デスクトップコンピューター、1200px以上）* / 
@media screenおよび（max-width：1200px）{...} / *中型デバイス（デスクトップコンピューター、1200px以下）* / 
@media screen and（max-width：992px）{...} / *小型デバイス（タブレット、992px未満）* / 
@media screen and（max-width：768px）{ ...} / *超小型デバイス（携帯電話、768px未満）* /

パーセンテージレイアウト

幅は固定されていません。パーセンテージを使用できます。また、内側と外側のマージンにパーセンテージを使用することもできます。

#head {width：100％;}

#content {width：50％;}

ul li {幅：16％;パディング：1％; マージン：0 1％;}

レスポンシブ画像

img {
 幅：100％; 
 高さ：自動; 
 表示ブロック; 
}

水平および垂直画面

/ *水平画面：デバイス画面のアスペクト比が大きい* / 
       @media screen and（orientation：landscape）{。
           box { 
               background-color：red; 
           } 
       } 
       / *垂直画面：デバイス画面のアスペクト比は高さよりも小さい* / 
       @media screen and（orientation：portrait）{。
           box { 
               background-color：blue; 
           } 
       }