ページレイアウトに応じて、携帯端末の開発、および
応答レイアウト
応答レイアウトは、一言で言えば、代わりに端末ごとに特定のバージョンを行うための、複数の端末と互換性のあるウェブサイトは、2010年5月にイーサンMarcotteによって提案された概念です。コンセプトは生まれモバイルインターネットブラウジングを解決することです。
応答性のレイアウトは、複数の異なるビューポートのサイズのスタイルに変化し、そのためではない幅は自動的にシンプルに適応することができますように液体のレイアウトを作るので。
応答性のレイアウトを達成するためのコア技術は、メディアクエリ（メディアセレクター）を使用することです。
異なるデバイス、異なるビューポートのサイズ、異なるスタイルのコードによって導入CSS3メディアクエリのコンセプト。
メディアクエリの形式は次のとおりです。
スクリーンと@media（最小幅：1200px）{ / *適用する/ *≥1200pxビューポートスタイル } @media画面と（MIN-幅：992px）と（最大幅：1200px）{ / *≤図992pxポート< 1200px スタイルが適用される* / } @media画面と（最大幅：992px）{ / *ビューポート<スタイルが適用さ992pxの* / }
共通のビューポートのサイズ
ビューポートのサイズや機器テーブルの ビューポートの機器 ≥1200px大画面：プロジェクターテレビPCのエンド ≥992px&& < 1200px 中の画面：ネットブック、小型ノートPC ≥768px&& <992px小さな画面：タブレット <768px超小型画面：携帯電話
表によると、あなたのサイトの実際の状況と組み合わせて、あなたは簡単にあなたが書くために必要なメディアクエリーコードを描くことができます。
例えば、私のウェブサイトだけで2例を検討：
1.携帯端末は、スタイル表示
スタイルを共有する2.その他のデバイス
ので、応答性のレイアウトに必要の要素を、私のCSSコードは、次の形式のようになります。
/ *全要素のスタイル* /
...
/ *携帯電話端末* /以外のスタイル
@media画面と（最小幅：768px）{
...
}
/ *電話スタイルの終わり* /
（@media画面と幅-MAX：768px）{
...
}
でサスでメディアクエリを使用して
、実際のプロジェクトの開発、我々は、SASSのように私たちが書くCSSのソースコードを、処理するために、プリコンパイラのいくつかを選択する傾向があります。メディアクエリに多くの事前コンパイラは非常に良いサポートを持っています。
同じの使用におけるCSSの@media命令でサスが、少し余分な機能を追加します：それは、ネストされたCSSルールを可能にします。@media CSSルール内にネストされた場合はコンパイル時に、@メディアは、ネストされた親セレクタを含むファイルの最外層にコンパイルされます。この機能は、@mediaより便利セレクタの使用を繰り返さないでください、使用することを可能にする、CSSは、書き込み処理は中断されません。
例：
.sidebar {
幅：300ピクセル。
@media画面と（最小幅：768px）{
幅：500pxなど。
}
}
モバイル終了ページの開発
モバイル側に固有の機能のいくつかは、我々が開発に特別な注意を払う必要があります。これらの機能は次のとおりです。
ビューポートの携帯端末1の問題
スケーリング問題の携帯端末2は、不注意に起因
次元の問題3.可動端要素
モバイル端末のビューポートの問題
モバイルデバイスへの鍵であるカテゴリーのデバイス幅は、現在の幅を読み込みます。
<メタ名=「ビューポート」コンテンツ=「幅=装置幅」>
これは矛盾モバイル端末自体とビューポートの幅の問題の幅を解決するだろう。
うっかり移動端に起因する問題をスケーリング
ユーザーが指でページの可動端をスライドすると、携帯電話には、以下の機能を提供する傾向がある：
急速なページを拡大することができ、ダブルクリックして
ページをズームすることができ、二本の指リトラクタブル
ユーザページのズーム禁止の方法：
<META NAME =「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1.0、分IMUM規模= 1.0、最大規模= 1.0、ユーザースケーラブル= 0」 >
手段は次のとおり
。1、最初のスケール= 1.0：初期スケール（元のサイズ）1.0、このコードの目的は、ユーザのズーム、防止することである
2、最小スケール= 1.0：減速比が小さなページ1.0（ありますこのコードの目的のために提供される元のサイズ）は、いくつかのアプリケーション（例えば、JS）縮小意図せずに変更されたページに配置される
ページ1.0の大きな増幅率（元のサイズ）が提供される：3、最大規模= 1.0文コードオブジェクトいくつかのアプリケーション（例えば、JS）を配置することで意図せずに拡大ページ修飾
ユーザスケーラブル4、= 0：このコードは、ページのズームユーザに許可されていない
携帯端末素子の問題の大きさ
と大きさをビューポート幅変更変更
方法：
1.まず、JSコードを書く、ウェブに適用されます
！（関数（勝利、DOC）{
関数setFontSize（）{
VAR winWidth = window.innerWidth;
doc.documentElement.style.fontSize =（winWidth / 1080）* 100 + 'ピクセル';
}
VAR EVT = 'onorientationchange'勝利で？ 'orientationchange'： 'リサイズ';
VARタイマ= NULL;
win.addEventListener（EVT、関数（）{
てclearTimeout（タイマー）;
タイマー=のsetTimeout（setFontSize、300）;
}、false）を;
win.addEventListener（ "pageshowの"を、関数（E）{
IF（e.persisted）{
てclearTimeout（タイマー）;
タイマー=のsetTimeout（setFontSize、300）;
}
}、偽）;
//初始化
setFontSize（）;
}（ウィンドウ、ドキュメント））。
-ドラフト設計の実際の幅によって置き換えドラフト設計コードの幅、等1080（単位PX追加しない）
-適切な値に置換コードの比、例えば100などを
それは、このコードは常にビューポートの幅の変化を監視している、常に確保：
ルート要素HTMLフォントサイズ=（幅ビューポート/ 1080）×100
例えば、iphoneXビューポートの幅：375、次いで、iphoneXに、ルートHTML要素のフォントサイズ：（1080分の375）×100 = 34.72px
CSSユニットREMの変化使用2、全ての画素値
ルートhtml要素のフォントサイズに対するREMユニット（ルート要素が設定されていない場合は、フォントサイズ、基準に対するフォントサイズ）。そして今、フォントサイズのルート要素は、ちょうどビューポートの幅を反映しています。
式要素次一定サイズのREM値：
設計案/ 100の大きさのREM =値
たとえばが、ドラフト設計は素子幅100個のピクセルであり、それは場合によっては、このように、1つのREMの幅に設定されなければなりません開口サイズがドラフト設計1080、ルート要素（1080分の1080）* 100 = 100ピクセルのフォントサイズの大きさに等しい場合、その幅は1rem = 100pxにあるような375は、ルート要素にとしてビューポート小さいサイズ、もしフォントサイズ（375/1080）* 100 = 34.72px、その幅1rem = 34.72px。この完璧な比率と設計案合意。
あなたは、背景画像（例えば、図スプライト）を使用する場合はもちろん、移動端は、図1と同様に背景のサイズを調整することを忘れません。