応答レイアウト
リットル 応答レイアウトであるイーサンMarcotte で2010 萬年5 月によって提案された概念で、一言で言えば、代わりに各端末の特定のバージョンを行うので、複数の端末と互換性のウェブサイトです。コンセプトは生まれモバイルインターネットブラウジングを解決することです。
リットル 応答レイアウトは、より快適なインターフェースと優れたユーザーエクスペリエンス異なる端末のユーザーのための、そして現在のシフトで大画面を提供することができます パーベイシブ・デバイスを移動するデザイナー、この技術のより多くの使用を。
リットル 応答部位の代表的なレイアウト： http://www.16ketang.com/
lは 徐々にページを変更するものを見るためにページのウィンドウを狭めるようにしてください
リットル 応答レイアウトは、したがって、複数の異なるビューポートサイズのスタイルへの変更、および幅はできないような液体のレイアウトにするので 、自動的にシンプルに適応します。
lは コア技術応答レイアウトはメディアクエリ（使用することであると認識メディアセレクタ）。
リットルの メディアクエリは、 CSS3の異なるデバイス、異なるビューポートのサイズ、異なるスタイルのコードによって導入コンセプト。
リットルの 原則応答レイアウトページのいくつかの要素が異なるビューポートに異なるスタイルを持っているように、それは、メディアクエリのたくさんある パフォーマンス。
L 一般的なビューポートのサイズ
lの 携帯電話、タブレット、ネットブックや小さなペンのページで、あなたが今メディアクエリを使用する方法を知っているが、我々は本当に気にしますが 、ノート、 PCの終わりには、より良い表現があります。
lの 問題は、多くの携帯電話の機種、あまりにも他の機器は、その大きさが異なる場合、どのように我々は現在のビューポートの足に決定しないということです 、それは何に属しインチデバイスを？
lは 幸いなことに、実用的なアプリケーションの数が多いの後、開発者は、このルールに従って、あなたが見ることができ、適用可能な一般的なルールのセットを総括している 対応する開口部までの大きさや、特定の機器を。
L個の ビューポートのサイズテーブル及び機器
ビューポート 装備
≥1200px 大画面を：プロジェクター テレビ PCの終わり
≥992px&& <1200px 媒体スクリーン：ネットブック、ノートPC小
≥768px&& <992px 小さな画面：平坦
<768px 超小型画面：携帯電話
L あなたのサイトの実際の状況と組み合わせ表によると、あなたは簡単にあなたが書くために必要なメディアクエリーコードを描くことができます。
リットル たとえば、私のウェブサイトは、唯一の2例を考えてみます。
- 携帯電話のディスプレイにスタイルを終了します。2. スタイルを共有する他のデバイス
リットル でサスは、メディアクエリを使用します
lの 実際のプロジェクトを開発するとき、私たちは書かれて処理するために、プリコンパイラのいくつかを選択する傾向がある CSSのようなソースコード、SASSを。メディアクエリに多くの事前コンパイラは非常に良いサポートを持っています。
Lサス で @media ディレクティブと CSS 同じの使用ではなく、少し余分な機能を追加します：それがで可能に CSS ネストされたルール。場合 @mediaは、 ネストされた CSSを ルール内でコンパイルされたとき、@mediaは 親ネストされたセレクタを含むファイルの最外層にコンパイルされます。この機能を可能に @mediaを 使用する方が便利、それが中断されません、再利用セレクターする必要はありません CSSの 書き込み処理を。
モバイル終了ページの開発
リットル 実際には、モバイル終了ページの開発、および通常のページとの違いを開発し、本質的なはありません。唯一のユニークなモバイルエンドは 、その機能のいくつかは、我々が開発に特別な注意を払う必要があります。これらの機能は次のとおりです。
1. 携帯端末のビューポートの問題2. 不用意端移動に起因するスケーリング問題3. 移動の サイズQ端子素子
モバイル端末のビューポートの問題
L個の ビューポートは、ブラウザ、終了それがどのように広いにおけるビューポートの携帯端末の表示領域を指しますか？
L のようなほとんどの携帯電話で利用可能になりまし iphoneのX 、そのデフォルトのビューポートの幅が980px 、およびiPhoneのX用のみの画面幅375px 。あなたはまだ問題を参照してください？唯一の幅375 ピクセルの携帯電話は、幅を示すことができた980 ページ上のピクセルを、自然に、ページが低減されます。
L 我々は、Baiduの検索結果にアクセスするには、Googleのモバイルブラウザ側のデバッグツールを使用することができ、ページを見ることができますが大幅に低減され 、それが中にページの幅を固定 980px 。
リットル で HTMLがキーを提供してくれるデバイス幅、現在の読書の幅は、モバイルデバイスへの鍵です。したがって、我々はあなたがモバイルデバイスと等しく、自身の幅のすべてのビューポートの幅を作ることができ、次のコードを使用する必要があります：
<メタ名=「ビューポート」コンテンツ=「幅=装置幅」>
これは矛盾モバイル端末自体とビューポートの幅の問題の幅を解決するだろう。
うっかり移動端に起因する問題をスケーリング
L ページの端をスライドさせながら、ユーザが指を動かし、携帯電話は、以下の機能を提供する傾向があります。
1. すばやくズームページ、クリックしてください。2. ページをズームすることができ、二本の指リトラクタブル
L 終わりが不注意以上、当社のウェブサイトは常に、関係なく、大きさや様々なスタイルの、モバイル端末用に特別に開発されてきた中で移動するので、 必要になります（デフォルトの場合は非常に適切であった、とページを拡大するユーザーを必要としないがほとんどすべてのことがわかったアプリを、）ページは、スケーリングを許可されていないので、Webページのスケーリングからユーザーを防ぐために良い選択です。
lの 具体的な実践は、のいずれかであるメタコンテンツの追加を続行する要素：
<メタ名=「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1.0、分IMUMスケール= 1.0、最大規模= 1.0、ユーザースケーラブル= 0」>
1.0初期スケール= L ：初期規模1.0 （元のサイズ）、このコードの目的は、他の複雑な理由でそれを書き込み、ユーザのズーム中に配置されず、記事はカバーしていません
1.0最小スケール= L ：減速比が小さいページである1.0 （元のサイズ）、このコードの目的は、（例えば、いくつかの番組置かれる設けJS ）意図せずに変更されたページの縮小率
最大= 1.0スケールL ：の拡大に大きなウェブ1.0 （元のサイズ）は、このコードの目的は、（例えば、いくつかの番組置かれる設けJS ）不用意に変更されたページを拡大
スケーラブル= 0ユーザー-L ：このコードは、ページ上では、ユーザーがズームすることはできません。
サイズは、可動端要素を重要
Lの ウェブページ非常に多様 プライム、ビューポートの幅が大きくなるように、サイズもいずれかのフォントの高さ、大きくなり、ギャップは、このような特性を有しています。
L フォントサイズ、幅と高さ、直面マージン、パディングのクラスサイズの属性が固定ピクセル値に設定できない場合。
L これは、JS コードは変換達成することができレム見つかりました：
！（機能（勝利、DOC）{関数setFontSize（）{VAR winWidth = window.innerWidth。
doc.documentElement.style.fontSize =（winWidth / 設計 案幅）* 比+ 'PX'; I 'はonorientationchange'} VARのEVT = N-勝利'orientationChange'：？ 'resiz E'; VARタイマ= NULL; win.addEventListener （EVT、関数（）{てclearTimeout （タイマ）。
タイマー=のsetTimeout（setFontSize、300）。}、偽）。win.addEventListener（ "pageshowの"機能（E）{IF（e.persisted）{てclearTimeout（タイマー）;タイマー=のsetTimeout（setFontSize、300）;}}、偽）。// 初始化 setFontSize（）; }（ウィンドウ、ドキュメント））。
意志
CSS のすべての画素値を利用変更レムユニット
L 我々は知っているが、 REMのユニットは、ルート要素を基準とするHTML （ルート要素は、フォントサイズ、ベースラインからの相対フォントサイズを設定しない場合）フォントサイズ。そして今、フォントサイズのルート要素は、ちょうどビューポートの幅を反映しています。
Lは このように、我々は、使用して、様々なサイズの値を必要と REMのユニットがビューポートの幅を変更するように構成することができるように。
L 特にそれがどのように提供されるか、非常に簡単であり、特定のサイズの一つの要素レム以下の式の値：REM 値= デザインのアートワークのサイズ/ 100
Lは、 例えば、ドラフト設計は素子幅 100個のそれはの幅に設定する必要があり、画素1 REM 場合ドラフト設計のサイズに等しいビューポートのサイズ、したがって、1080 、ルート要素のフォントサイズ（1080分の1080） 100ピクセル= 100 * 、その幅は1 REM = 100pxに、もしそのようにビューポートとして小さいサイズ、375 、ルート要素の次に、フォントサイズ（1080分の375）×100 = 34.72px 、その幅= 1 REM 34.72px 。この完璧な比率と設計案合意。
L バックグラウンド画像（例えば、図スプライト）を使用する場合はもちろん、移動端末において、図1と同様に背景のサイズを調整することを忘れません。