古いバージョンのルーチンの練習
オプション1：Meidaクエリメディアクエリ
meida queries 主に、異なるデバイス幅クエリによって実行される css 最終的なコンフィギュレーションインターフェースを実現するためのコード。コア構文は次のとおりです。
|
私たちは、メタ設定を追加する必要があります
|
幅=デバイス幅：幅はスクリーン装置の幅を表します
初期の規模= 1.0：最初のスケールを示し、
最小スケール= 1.0：最小スケーリングを表します
最大規模= 1.0：最大規模を表します
ユーザースケーラブル=番号：ユーザーがズームを調整できるかどうかを示します
このタグは、携帯端末装置に同一の画面幅ページの幅を保証することができます。
オプション2：ビューポートの尺度
幅（320ピクセル）の最小基準、視覚還元案としてiPhone4の/ 5。
| < メタ名= 「ビューポート」コンテンツ= 「幅=装置幅、ユーザースケーラブル=なし、初期規模= 1.0 /> |
そして、携帯電話ブルートスケーリング設定の異なる画面解像度。iphone8（375px）初期規模= 320分の375 = 1.18：例えば
| < メタ名= 「ビューポート」コンテンツ= 「幅=装置幅、ユーザースケーラブル=なし、初期規模= 1.18 /> |
ページのコンテンツは、ページの内容で、その結果、より厳しい引き伸ばされます初期スケールの成長は、不鮮明になり、この方法は放棄されています。
高さは死んでしまう、幅適応要素が使用されているpxユニットを行うこと。
幅は、このように達成し、調整する必要がある場合、画面幅の変更により、ページが応答レイアウトトーンを使用して変更（例えば、網易のニュースなど）のほぼライン上のPCや流体レイアウトページへの影響に続く「フィット感を。」
プログラムIII：応答のレイアウトで
新しいアプローチ
オプションのIV：REM
我々は、フォントサイズの要素を指定するときに、他の言葉では、2rem時間も、この要素は、フォントサイズのルート要素であると言った<html>場合、フォントの2倍のサイズhtmlフォントサイズは12px、この2rem要素は、フォント・サイズです24px。要素は同様場合3rem、次に、その実際の時間
フォントサイズです36px。
| HTML { フォントサイズ：12ピクセル;} H1 { フォントサイズ：2rem。} / * 2×12ピクセル= 24ピクセル* / P { フォントサイズ：1.5rem;} / * 1.5×12ピクセル= 18px * / DIV { 幅：20rem;} / * 20 * 12ピクセル= 240ピクセル/ * |
あなたが見つかりますここで見るべきである限り、我々はルート要素に応じて、画面を設定すると<html>、フォントサイズ、他の人はレムユニットの要素を使用している適応の対応サイズを表示します。
レム・コンピューティング
我々は一つのことを行う必要があり、事前のレムの単位を使用すると、ルート要素を設定することで<html>、フォントサイズのを、2つのアプローチが一般的にあります
方法a：JSの計算
JavaScriptによって読み取ら画面幅は、次にフォントサイズの幅に応じてルート要素に対応する大きさを計算し、設定します。
| CONST oHtml = document.getElementsByTagName（'HTML'）[ 0] constの幅= oHtml.clientWidth。 // 320PX基準ピクセル画面は12ピクセルであります oHtml.style.fontSize = 12×（幅/ 320）+ "PX"。 |
そのようなiphone8は（375px）htmlフォントサイズが15.525pxあるiphone8pフォントサイズは、14.0625pxあります。
24ピクセルフォントサイズの効果を備えている1.7066remとしてiphone8（375px）に配置されたフォントサイズの要素は、（24 / 14.0625 = 1.7066）が同じである場合。
画面の幅を取得するために、JSを使用する利点は、すべてのモデルは、その幅が100％フィットで<html>直接アウトカウントされ、ベンチマークサイズの要素。動的セットので避けるために、JSのコードであるため、<html>要素のフォントサイズのページは私達が置かれるコードヘッダの一般的な部分に起因するジッター
ロードするボトム、および内部のインラインHTMLドキュメント。
方法2：メディアお問い合わせ先
今だけ、画面の幅に応じて設定する<html>要素のフォントサイズ、そして私たちは、CSS3メディアクエリによって行われた仕事のこの部分を完了することができます。
| @ メディア画面と（最小幅：375px）{ HTML { フォントサイズ：14.0625px。} } @ メディア画面と（最小幅：360px）{ HTML { フォントサイズ：13.5px。} } @ メディア画面と（最小幅：320ピクセル）{ HTML { フォントサイズ：12ピクセル。} } HTML { フォントサイズ：16pxに。} |
レム既存の問題
この問題を解決することができ、シンプルで粗溶液REM溶液区別異なる画面ビューとして、問題の大部分が発生し、移動端末の画面サイズに適合しました。しかし、それはその制限があり、完璧なソリューションは、ないので。
大画面のスマートフォンの時代は、ほぼ完全に紙を読む習慣を10年前に私に取って代わる確かです。2011年から今まで、携帯電話の画面幅手は改善したが、新しいソフトウェアを使用してディスプレイのサイズを見てすることはほぼ一定であるされています。REMは、特に大きな論文では、ある程度のユーザーのテキストを読む習慣を破るだろう使用
場合は、コンテンツの断片。
その背後にあるiOSとAndroidプラットフォームの適応モードの設計思想はこれです：テキストを読む際に、メディアのない絶対的な大きさなどのテキスト場所の関係との組み合わせで実寸値のテキストのフォントの間隔をより読みやすく、。（理解するような単純なことができます：A4サイズの用紙とA3サイズ、あるいは大きな新聞、快適な読書
フォントサイズそれらが手に読んで必要とされているので、絶対的な大きさは、同じである読み取り、携帯電話も同じ理由である）;ビデオ画像を見たときに、写真、動画の比率が固定されなければならない、状況は引張変形を生じてはなりません。レムとフォントサイズで使用する場合、設計に反し異なる画面上の絶対的に一貫性のないフォントサイズ、
哲学。
参照