モバイル端末のレイアウトと開発

モバイル端末プロジェクトは、4つの問題に注意すべきです

1）は、ビューポートがメタ提供され
、拡大または縮小meta要素のindex.htmlを、セットビューポートを追加する必要がユーザの手の滑りページを防ぎます。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

2）CSSスタイルの統一問題
異なるモバイルブラウザ上で、デフォルトのCSSスタイルが均一でないため、我々は、ページスタイルをリセットする必要があります。回避策：reset.cssリセットすべての要素のデフォルトスタイル

3）ピクセルの境界線の問題は
、比較的高い解像度が、画面が2倍または3倍の画面で一部の携帯電話は、携帯電話のブラウザは、2つまたは3つの物理的な幅として示さCSS内の画素値になります
ソリューション：追加border.cssライブラリが使用する原則スクロール、ズームをリセットボーダーになります。我々はこのような画素の下の境界線の上に提供されているように、クラス名に対応するラベルの画素の境界線を追加する必要がある場合は、ラベルに「のborder-bottom」クラス名を追加します

4）300ミリ秒のレイテンシの問題をクリックして
、ユーザーエクスペリエンスに影響を与えている、一部のモデルでは300msの遅延の実装前に、使用のクリックイベント、モバイル端末の開発に。ソリューション：導入fastclick.jsを。

移動端末ベース

エンド主流のモバイルブラウザ、Webkitのカーネルの互換性は主に
、携帯電話側のためにクロムDEVとデバッグのアナログ電話インターフェイスを開発します

ビューポートは、
ブラウザが表示画面のページのコンテンツ領域がビューポートレイアウトビューポート、視覚的なビューポートに分割され、理想的なビューポートすることができ
、モバイルレイアウトがやりたいビューポートのための理想的です：どのようにワイド画面、より多くのレイアウトビューポート広い
理想的なビューポートをしたい、あなたは、ビューポートメタタグのモバイル端末にページを追加する必要があります

1. レイアウトビューポートレイアウトビューポート
   

2. ビジュアルビューポートのビジュアルビューポート
   

3. 理想的なビューポートのアイデアビューポート
   

ビューポートメタタグ

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

二度マップ

1. より物理的なピクセル・物理ピクセル
   物理ピクセル：解像度は、iPhone物理ピクセル750
   iphone8レーン、1ピクセル開発画素=物理二つの画素で
   
   
   
   

2. 図回
   の例では、50-必要直接2れる意志iPhone 100倍に50画素（CSSピクセル）の画像を 100
   入れて100だから画像100を、この画像を手動で50に還元 50（CSSピクセル）
   画像調製します2回の実際の必要性よりも大きい、このアプローチは二回図である
   図cutterman複数のカット図。

3. 背景ズーム
   背景画像の背景サイズ属性指定されたサイズ：幅、高さ、
   単位長さ|パーセンテージ|カバー|含ま
   のみ書き込み幅の長さ又は書き込みのみ高さの比は、ズーミングのようになる
   割合は、親ボックスズームに対してある
   背景画像に拡大されたカバー完全背景領域ように、背景画像をカバーする十分な大きさ（幅と高さの比は、延伸が完全ボックスをカバーするためには、不完全ないくつかの背景画像があってもよい）
   、完全にコンテンツ領域の幅と高さに適合するように最大サイズに拡大画像が含まれてい（場合ボックス到達幅と高さ、幅または高さの延伸倍率は、延伸、空白領域があるかもしれなくなりました）

例：50そこにある- 50箱は、背景画像を必要とし、画像を準備する必要があります2回100 100
画像のズーム50 * 50で半分、
DIV：背景サイズ：は50px、は50px

モバイル開発オプション

1. モバイルデバイスは、可動端ジッタページを開いている場合、エンドページを移動別正面（メイン）URLドメインプラスM（モバイル）は、エンドm.jd.com判定手段を移動させることにより開くことができます

• 流体レイアウト（レイアウト割合）
• フレックス弾性レイアウト（推奨）
• 少ない+ REM +メディアクエリのレイアウト
• ハイブリッドレイアウト

2. 異なる端末を収容する画面の幅によって決定される変化パターンに応じた対応の携帯端末PC

• 報道関係お問い合わせ先
• ブートストラップ

モバイルブラウザ終了
ので、互換性の問題が開発する際のWebKitを考慮し、基本的なWebKitのコアにモバイルクライアントのブラウザを
H5タグを適応し、CSS3スタイルので安心できる
プライベート接頭ブラウザのみのWebKitを追加することを検討する必要があります

CSSの初期化normalize.css
バグを修正しましブラウザ
貴重なデフォルト値を保護するためには、
モジュール化され、文書の詳細

CSS3ボックスモデル
計算される幅の伝統的なモード（ボックスサイズ：コンテンツ-ボックス ）：幅ボックスの幅= CSSセット+ボーダー+パディング
CSS3ボックスモデル（ボックスサイズ：ボーダーボックス ）： ボックス= CSSセット幅の幅幅（パディングとボーダーを含む）
カセットがどのくらい、パディング提供して、ボックスの境界線を設定されているストレッチはありません

• モバイル端末は、すべてのCSS3ボックスモデルがよいです
• あなたは、PC側は、伝統的なと完全な互換性が必要な場合、あなたはCSS3ボックスモデルを使用して、互換性を考慮していない場合

モバイルエンド特別なスタイル

個別に終了ページを移動

流体レイアウト

また、非固定画素レイアウト（共通）として知られているパーセンテージ分布は、ある
画面の幅に応じて、割合にボックスセットの幅によって伸縮。充填コンテンツの両側に固定されたピクセル限定されるものではなく、
最大幅の最大幅（最大高さ）は、この値がスケーリングされていない超えた
分の幅の最小幅（最小高さ）

フレックスレイアウト

レイアウト原理
ボックスモデルのための最大の柔軟性を提供する柔軟ボックス弾性レイアウトは、任意の容器がフレックスレイアウトとして指定することができます。
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

• 親がボックスのレイアウトを曲がるようにすると、子要素が浮く、クリア、および垂直-alignプロパティは失敗します
• 弾性延伸レイアウト=レイアウト=レイアウト=弾性伸縮カートリッジボックスレイアウト=レイアウトフレックス
• Flexのレイアウト要素と呼ばれるFlexコンテナ（フレックスコンテナ）を使用します。これは、すべての子要素が自動的にFlexプロジェクト（フレックス項目）と呼ばれる、コンテナのメンバーになってきました
  

共通の親プロパティ

• フレックス方向：方向（項目、すなわち、配列方向）に主軸を設定する
  行（デフォルトは左から右にされる）|行逆|カラム|カラム逆;
  スピンドル及びサイドシャフトが変化する、フレックスdireactionを提供参照誰スピンドル、他のサイドシャフトです。私たちのサブ要素は、主軸に沿って配列されています
• -コンテンツが正当化：セットの主轴サブ要素の配置上の（このプロパティを使用する前に、最初の良いスピンドルを決定）
  フレックススタート（デフォルトは左寄せされます）|フレックスエンド右揃え|中央センター| space-between先两端贴边，再平分剩余空间|スペースの周りに残りのスペースを二分します各プロジェクトのマージン左マージン右等しいです
• フレックスラップ：セットの子要素ラップするかどうか
  NOWRAP（デフォルトはラップされていない）|ラップ|ラップリバース;
  Flexのレイアウトは、デフォルトの子要素がラップされていません。フィットは、自動的に親要素の内部にサブ要素の幅を小さくした場合
• ALIGN =左 -items：セット侧轴（上の子要素の配置単線）
  フレックススタート（下にデフォルトのトップ）|フレックス・エンド|センター（中央が上下中央、密集）|ベースライン|ストレッチ（ストレッチが、子）要素の高さを与えてはいけません。
• ALIGN =左 -content：設定侧轴（上のサブ要素の配置マルチライン）場合サブキーラップで発生
  中心（中間軸側）| |フレックスエンドフレックススタート（シャフトのヘッド側にデフォルトを出発配置されています）|空間との間の（子供が横軸を残りの空間を二分）|空間アラウンド（二シャフトの配信側で最初の子、残りのスペースに均等）|ストレッチ（親要素の高さの子要素は、二等分線の高さです）。
• フレックス方向とセットラップフレックスに対応しながら、複合プロパティ：フレックスフロー
  <フレックス方向> || <フレックスラップ>。
  

一般的な子プロパティ

• フレックス：残りのスペースを割り当てることはサブによって占め份数
  フレックス：<番号>、デフォルト0
• ALIGN-自己：彼らの側軸配置の制御子供（ALIGN-項目をカバーすることができるプロパティは、親を持たない場合には、ストレッチと等価である）
  Auto（デフォルトの継承親要素ALIGN-itemsプロパティ）|フレックススタート|フレックス・エンド|センター|ベースライン|ストレッチ。
• 注文：アイテムの順序定義
  より前方に小さい数値（反対のzインデックス）、デフォルト0を

レム適応レイアウト

REM部
EMは、親要素のフォントサイズである
基準である、REM（ルートEM）が相対単位である相对于html元素に字体大小
2rem、PXは、その後24ピクセルに変換される：非ルート要素の幅を提供し、ルート要素（HTML）に配置されたフォントサイズ= 12ピクセル等

REM利点：テキスト内部のサイズ}缶、全体的な制御を達成するために、{HTMLを変更することにより、ページ内の要素のサイズを変更します

報道関係お問い合わせ先

CSS3メディアクエリは、新しい構文であります

• 異なるメディアタイプごとに異なる@meidaクエリを使用すると、スタイルを定義することができます
• @media可以针对不同的屏幕尺寸设置不同的样式
• あなたは、プロセスのブラウザのサイズをリセットすると、ページがブラウザの幅と高さに応じてページを再レンダリングされます
• 混乱を防ぐために、小さなに大きい（推奨）または書き込みに降順にメディアクエリに応じて、オーバーラップCSSがあります

構文仕様

@media mediatype and | not | only (media feature) {
    CSS-Code;
}

<style>
//在屏幕上，并且最大宽度是800像素（<=800px），设置样式
	@media screen and (max-width: 800px){}
</style>

1. MEDIATYPEクエリタイプは
   、異なるタイプの異なる端末装置に分割されるであろう
   全てのすべてのデバイスに対して、プリンタと印刷プレビューの印刷、コンピュータ画面の画面、タブレット、スマートフォン
2. キーワード
   メディアタイプ以上のメディアの特性は、条件メディアクエリとして、一緒にリンク
   と一緒に複数のメディアプロパティへの接続「と」
   メディアタイプを除外しない「非」
   nolyメディアの特定のタイプを指定します
3. メディアの特性
   幅
   最小幅
   、最大幅

資源の導入は
、それらが異なる画面サイズのためにすることができ、異なるスタイルシートを様々なスタイルを比較
原則：直接リンク内のデバイスのサイズを決定するために、参照異なるCSSファイル

<link rel="stylesheet" href="mystylesheet.css" media="mediatype and|not|only (media feature)" >

以下の基礎

CSSは、非手続き型言語、ない変数、関数、スコープで
少ない（スリムスタイルシート）CSSもCSSプリプロセッサとして知られている言語拡張であり、

npm install -g less
lessc -v 查看版本

1. myless.less
2. 変数名@：値;色と値を適用
3. 使用するファイルにコンパイル少ないCSSファイル、HTML
4. 以下のネスト：いいえセレクタ

.header{
	a{ //1. 子元素的样式直接写到父元素里面
		color: red;
		&：hover{ //2.如果有伪类选择器，伪元素选择器，交集选择器，内层选择器的前面需要加&，a：hover{ }
			color: blue;
		}
	}
}

5. 以下の操作
   の任意の数、色または変数が計算に関与している
   中間オペレータが離れて空間を残した：1ピクセル+ 5は、
   ユニットの演算結果、計算の異なるユニットの間の値の最初の値をとる
   2つの値の間であれば単位は一つの値だけを有し、演算結果がフェッチユニット

レム適応方式

1. いくつかの要素は、現在のデバイスを適応させるの割合として、デバイスのサイズの時間を変更するには、幾何学的な適応を作ることができません
2. デバイスに応じて比例的にHTMLフォントサイズを設定し、使用メディアクエリ、;適応の幾何学的なスケーリングを実現するようにし、HTMLフォントサイズを変更するとき、実行するREMのディメンションを使用して、ページ要素は、要素のサイズが変更され

ドラフト設計は、装置の幅をスケーリングすることができる、ルートHTMLを動的に計算及び設定フォントサイズのラベルサイズ（メディアクエリ）
同じスケーリングユニットREMに応じてCSS、幅と高さ、等の設計案値の要素の相対位置、値

• 少ない+メディアお問い合わせ+レム
• flexible.js + REM
  

応答開発

これは、効果を達成するためにサブ要素と一致するように、レイアウトコンテナとして親を必要とする
原理：別画面でメディアクエリーを介して容器のレイアウトのサイズを変更し、その後、内部のサブ要素の配置とサイズ変更
異なる画面をもたらし、異なるページレイアウトやスタイルが変化するので、別のアダプター・デバイスを参照してください

ブートストラップフロントエンドの開発フレームワーク

http://bootstrap.css88.com/、3.XX推奨
フレーム自体の制御を、ユーザが規範的枠組みの規定に従って開発されなければなりません

レイアウトコンテナ
ブートストラップは、あらかじめ定義されたクラスのブートストラップを.contain、包装容器.containerページのコンテンツやグリッドシステムを必要とします

1. 容器型
   容器（照会メディアを使用せずに、異なる画面サイズにおいて異なる幅を有する）応答レイアウト、固定幅の
   大画面（> = 120ピクセル）1170pxとして幅
   970pxとして画面（> = 992px）幅を
   小画面（ > = 768px）750px幅と
   超小型スクリーン（100％）
2. ベース容器流体
   流レイアウトコンテナ、全幅は
   全体ビューポート（ビューポート）容器占める
   別個の携帯端末の開発に適しました

グリッドシステム
グリッドシステムのページレイアウトは、列のページ番号のモジュラーレイアウトによって定義され、同じ幅の列に分割される
スクリーンまたはビューポートと、ブートストラップ応答、モバイルデバイスの優先ストリーミンググリッドシステムを提供しますサイズが大きく、システムは自動的に最大に分割される12
ブートストラップは、容器の内部幅の固定が、別画面で、別のコンテナ幅は、我々は、コンテナ12個のアリコートに分割
既にNormalize.cssが含ま

グリッドのオプションパラメータは

子株式の合計があれば
12に等しく、子がコンテナの幅全体が埋めることができ
未満12、子供が少なく、コンテナの幅全体よりも占め、ギャップがあるだろう
12より大きく、別の列になり、その後過剰彼のショー以来、

入れ子になった列
および12アリコートとして、列

マージン値を追加しないで、内部実装が等しく幅、フロート=左

カラムは、オフセット
動作要素右
部分はオフセット= 12-ボックスの2つの部分
/ 2だけボックスは、望む効果をセンタリングし、12--カセット部をオフセット

列がソートされ
、左側のボックスに右側プルを引っ張っ、右プッシュするボックスの左側を押して

応答ツール
可視XS、可視SM、可視LGはページの内容を示すグラフです。