モバイル側のレイアウトの問題で

モバイルプロモーションスピード、良い効果を終了し、より多くの企業が、企業はのページ（H5）を移動する移動局の建設と生産に注意を払うようになりました。より多くのゲームがページを移動するために再生されると、フロントエンド技術に対する要求は高くなります。
適切なレイアウトを選択して、最初のステップは、モバイルページを作成することです。今日は、携帯端末の問題のレイアウトについて話しましょう。
なぜ携帯端末レイアウトそう混乱？これは、マルチパーティの原因によって引き起こされます。

1. この技術システム自体は非常に混乱しているCSS、基本的にあなたは何の法律が熟練労働者ではなく、いくつかのより多くのロジックのレベルに応じて、すべてではありませんと言うことができます。
   2。アップグレードCSSの後に複数回、本質的に関連の各アップグレード後、古いものと新しい技術基準。たとえば、次のテーブルレイアウト、DIV + CSSレイアウト、フレックスレイアウト、グリッドレイアウト。
2. 混乱の携帯電話市場。多様な携帯電話の現在の市場規模、プラスiphoneのDPRの混乱の技術によって引き起こされる網膜;
   モバイルデバイスのいくつかの基本的な概念の理解。
   A. 物理デバイスピクセル。
   質問：懐中電灯は一つの色の光を発することができる、と我々のスクリーンは光非常に多くの色を発するなぜ
   我々の画面が点が異なる色の光を作ることができるそれぞれが多数の小さな懐中電灯、から構成されているので、最後に、我々は、色の効果の形成に参照してください。
   各画像は、各色のドットが画素カラードットと呼ばれています。30万カラードットからの画像は、この画像の画素が30Wです。私たちは、多くの場合、4000W 4000Wピクセルのカメラが途中で、カメラの画素は、実際にどのように多くのデバイスのこの感覚は、100Wの光に敏感なデバイスのカメラは光に敏感なデバイスで100Wピクセルカメラをである持っていることを言っているカメラは画素数があると言いますように。100Wピクセルカメラで撮影した写真は、6インチの写真に洗うより少しクリアされます5インチに洗います。
   II。画面解像度
   画面解像度は、ラインスクリーン*の各列の画素の数、および各画面あたりの画素数は、独自の解像度を有しています。明瞭さが高いほど、より多くの色が提示、画面の解像度が高いです。
   結論：
3. 単位画素は、本質的に：あなたは100懐中電灯を持っているように数、画素100が理解することができます。
4. 同じサイズ（例えば、1センチメートル1センチメートル矩形サイズ）の画素の、より多くの内部、より鮮明な画像;
   III。CSSピクセルは
   1つの物理デバイスの画素PC側1css画素に相当します。
   思考：
   私たちの携帯電話の解像度は640ある？私たちは、ウェブサイトに何が起こるのか、純粋にPCエンドを開くと、1136年（物理デバイスの解像度5S iPhone 5、およびiphone）
   （このようなjumei.comとして、最小幅は、PCで、1090pxですscreen.widthによって検出された1280年の終わりの私のコンピュータデバイス幅、）
   我々はサイトがに削減されることがわかり、私たちは）サイト全体（www.jubi.comを見ることができます
   禁止はスケールので、スクロールバーがあり、発見されます
   IV。DPR
   1のGe CSS物理デバイスの画素構成するピクセル数
   思考：iPhone 5のiPhone 5Sまたは限界を表示する画面をどのくらいの幅？
   なければならない* 2 = 640ピクセル（可視領域のデフォルトCSSの幅）320
   上に、我々すべてのレイアウトに関連した携帯端末の概念について学び終え、その後、のは、レイアウトのアイデアをチャットしましょう。
   私たちは640ピクセル幅の設計案を持っている場合は、どのように我々は、ユーザーがそれをすべて表示できるようにすることができます？
   思考のライン：割合の分布
   など、我々は640ピクセル幅の外にある量として2により、サイズには、--->実際には、我々は唯一320PXを書き、
   iphoneの場合375px;？どのように幅を行うには、iPhone 6 6
   幅320および375は実際には非常に異なるものではないので、我々は、全体の幅は、その後、全体量のうち、他のはどのくらいです、100％に可変幅設定されていることができます。
   レイアウト方法
   • 我々はドラフト（640ピクセルを推奨）を設計するデザイナーを取得した後、全ての2サイズのうちの量で割った値
   • 割合に遭遇したアリコート
   • 右+左フローティングフローティング（ナビゲーション部分を達成するために、ナビゲーション部は、割引を推奨） - >幅固定のすべての要素に適し
   • 固定幅のため>要素、他の幅-フローティングのまま押圧+パディングは、（割引のセクション推奨内容を参照）は、本質的に以下の任意の次元において同じ素子サイズであり、実際には、要素と要素の間の間隔の大きさを変更します適応;
     サイトの例
     -  http://m.duba.com/
     -  http://m.lagou.com/
     欠点の割合レイアウト
     ページ幅のいくつかの要素の影響になります大画面の携帯電話に表示が引かれます長いが、非常にオリジナルとまだ同じ、実際の表示は非常に矛盾している、これは最も致命的な欠陥のフローレイアウトで、多くの場合、少数のアンダーサイズの携帯電話の効果は、実際には、満足のいくものである参照、多くのビジュアルデザイナ水平方向と同じと同等の効果を伸ばしている彼らのデザインは、大画面の携帯電話で見られるので、私たちは、このような効果を受け入れるべきではありません。流体レイアウトは、レイアウトの大部分を通じて、多くの場合、互換性の問題がたくさんあるだろう、達成するための最良の方法ではありません、彼らは初期の設計フローレイアウト要素で考慮する必要があるため、設計上の制約の多くは、そこにあります影響は、横方向の設計多くの制限があり、レイアウト設計要素を延伸することができます。
     2思考：REMレイアウト
     レムレイアウトを理解するためにどのように？
     :? 64であることが、適切な答えの数である必要があり、以下の640ピクセル、その後、75pxである私たちはデザインが750pxでドラフトならば、我々はボックスの幅の外に達し、問題を考えてみて
     確実にするために、あなただけのサイズのCSSを記述する場合、問題下記の異なる画面サイズに変更しないでください、一度書く必要がありますか？
     私たちは下記750px場合は、我々は640ピクセルで、HTMLフォントサイズ75は、ボックスの幅が1remで聞かせてのは、64のHTMLフォントサイズにしましょう、このボックスの幅が1remなので、問題が解決されます。
     次に、このような種類を使用し、レイアウトのアイデアのように実際の開発、？
     アイデアを確実にするために、共通のレイアウトを持つことができませんので、我々は、m.jd.com、m.vip.com、わかります、実際には、単なる割合またはREMのレイアウトでウェブサイトを持っていない、多くの場合、様々なレイアウトのアイデアと混合した開きます疑い
     レムは万能薬ではない、なぜ？
     私たちはDPR 2の場合には非常に厚いとなります場合は、このような1pxのように、我々はそれが本当画素でないことを知っていたん。
     推奨レイアウトのアイデア-アリが使用するには、LIB-柔軟なライブラリーを作成しました。
     URL：https://github.com/amfe/lib-flexible、
     それを使用する方法？
5. flexible.jsのレイアウトの導入によりメタ書き込みにされていません注：flexible.jsが自動的に作成するのに役立ちますので、ビューポートラベルを、
6. 導入base.css;
7. 基準草案フォントサイズ75で示さ発行750の幅として示さ基準ドラフト案/ 10で表されるフォントサイズ=幅、で表さを引き継ぐために設計者に発行され、参照ドラフトフォントサイズによって示さ示さ発行幅640が64です。
8. あなたが出て測定した場合のサイズをフォントに加えて、すべてが他にREMによるものであり、あなたのデザイン案が750pxであるような、そして、75pxで、それは1remであり、
   フォント以外のようなDPRの設定に応じて、異なるサイズであることが設計案が750の場合、フォントは24ピクセルで、次の場合には、その、その後、DPRケース1は16pxにある、DPR2状況が24ピクセルで、ケースDPR3は32PXである（これは一言で言えば、専門知識のフォントが含まれています誰もが、奇数のフォントを考慮しないだろうhttps://www.zhihu.com/question/20440679、我々はツールは、私たちが自動的にカウントするのに役立ち死者を記述する必要は任せることはできない。
   これらは、携帯端末のレイアウトのいくつかの私の個人的な要約です。そうでない場合は。適切な場所は、私を修正してください
   についてのよくある質問、最後に移動するには、エンドを添付する際に、ウェブサイト：
   -  http://www.cnblogs.com/PeunZhang/p/3407453.html
   -  https://github.com/zhiqiang21/blog/ BLOB /マスター/ README.md
   -  https://github.com/sunmaobin/Mars/tree/master/issues
   -  http://www.cnblogs.com/PeunZhang/p/4517864.html
   -  HTTP：// WWW。 cnblogs.com/PeunZhang/p/4903710.html
   -  http://www.cnblogs.com/PeunZhang/p/4633255.html
   - http://www.cnblogs.com/PeunZhang/p/3835717.html
   -  http://www.cnblogs.com/PeunZhang/p/3592096.html