遠位ノートページレイアウトにハート応答--------

応答性のデザインとは何ですか

ウェブサイトを作成し、異なる解像度の互換性のあるデバイス

ユーザーに、より良いビジュアル体験を与えます

 

背景誕生

マルチディスプレイのモバイルインターネット端末

モバイルインターネットtrapolation誕生応答レイアウト

 

応答設計上の利点と欠点

長所：ディスプレイ機器鋸の分化を解決

短所：マルチコード互換性、ワークロード、読み込み速度によって影響を受けます

レイアウトは、ユーザーが正確に判断しないことがあり、元のサイトに影響を与えます

 

 

応答性のデザインの原則

モバイル優先度：ページがマルチディスプレイ端末の設計の早い段階で考慮すべき方法

プログレッシブ・エンハンスメント：最大ハードウェアの機能を十分に発揮します

 

 

どのように応答性のレイアウト

CSS3メディアQjuery（最も簡単な方法）

ネイティブJavaScriptを使用して（高コスト、推奨されません）

サードパーティ製のオープンソースのフレームワーク（うまくブラウザ応答設計レイアウトをサポートすることができます）

 

 

CSSメディアクエリ

共通の属性：

デバイス幅、デバイスの高さの幅と画面の高さ

ウィンドウの幅と高さをレンダリング幅、高さ

方向配向装置

解像度のデバイスの解像度

コードは以下の通りであります：

< スタイル> 
            @media画面と（最大幅：600PX）{ 
                本体{背景：blanchedalmond 。} 
            } 
            @media画面と（最小幅：100pxに）と（最大幅：640ピクセル）{ 
                本体{背景：赤。} 
            } 
            @media画面と（最小幅：1001px）{ 
                本体{背景：小麦、}     
            }     
        </ スタイル>

 

サードパーティ製のプラグイン：応答レイアウト  ブートストラップ