移動端末レイアウトREMに応答して

電話でのページのデザイン案は、一般的に640ピクセル幅である、しかし、携帯電話の画面サイズは2つのソリューション、REMのレイアウトとパーセンテージのレイアウトがありますが実際に不確実であり、すべての携帯電話端末のページに適応するようにしたいと思います。

ここでREMは、携帯電話のページを製造するために使用されています。

rem新しく追加されたCSS3は、値の単位であり、彼はemユニットとして、相対的な単位です。違いはあるem要素の親要素へとについては、そのfont-size計算され、remルート要素を基準とhtmlされるfont-size計算します。

原理：

（1）最初のドラフト設計およびデフォルトフォントサイズ（典型的には100ピクセル）の幅比REMを算出し、

（2）は、この変化に基づいて、JSによってデフォルトの最大画面幅（によって典型的には640ピクセル）は、現在のデバイスと幅算出倍数をスケーリングする必要性、HTMLデフォルトフォントサイズの乗数値に従いました。

例：

デフォルトセットの最大画面幅（最大画面幅）640ピクセル、デフォルトのフォントサイズ（デフォルトFZ）100pxにある、提供設計案全体のデフォルト（既定のオブジェクトの幅）106px

その後：REM =デフォルトオブジェクトの幅/デフォルトFZ = 100分の106 = 1.06rem

320PX幅現在の画面を設定し、発行された現在の設計幅（それらこの幅）xは、現在のフォントサイズ（現在FZ）は、Yであり

その後：幅そのデフォルト/現在のデフォルトのオブジェクト幅FZ == / = X / Y = 1.06rem電流FZ、

最大画面幅/現在のデフォルトのオブジェクトの画面その幅=幅/電流）= 320分の640 = 106 / X

溶液：Y =（* 320 106）/（640 * 1.06rem）=（100 * 320）/ 640 = 50、すなわち、現在のFZ =（現在のデフォルト画面幅FZ *）/デフォルトの画面幅

JSコード：

1 <スクリプトタイプ= "テキスト/ JavaScriptを">
 2  新しい新 機能（）{
 3。 VAR _selfは= これを、
 4  VAR deviceWidth = screen.width; // デバイス幅
5 _self.width = 640; // 設定されたデフォルトの最大幅
6。 _self = 100 .fontSize; // デフォルトのフォントサイズ
。7  
。8  // 現在の幅は、デバイスのデフォルトの最大幅よりも大きい場合、それはデフォルトの最大幅を返す
。9 _self.actualWidth = 関数（）{
 10  IF（_self.width <deviceWidth）{ 戻り_selfを。 };幅
 11。 他 { リターンdeviceWidth;}
 12である };
 13である 
14  // 式に従ってデフォルトフォントサイズHTML変更
15 document.getElementsByTagName（ "HTML"）[0] .setAttribute（ "スタイル"、 "フォントサイズ：" +（_ self.actualWidthを（） _self.fontSize *）/ _self.width + "！PX重要" ）;
 16  };
 17 </ SCRIPT>

使用のレムでSASS：

CSSでは、実装するpxとrem、変換は非常に簡単ですが、サスを実現使用方法を次のように、各時間を計算することが要求されているpxとremの間で計算。

！まず、宣言変数：$ブラウザのデフォルトフォントサイズ：100ピクセルデフォルト。

そして、html文のショールート要素font-size：HTML { フォントサイズ： $ブラウザのデフォルトフォントサイズ; }

その後、次に@function実装されるpxにrem計算値：

@関数のREM（$ PX）{
@return $ PX / $ブラウザのデフォルトフォントサイズ* 1rem。
}

変換の必要なときに関数を呼び出します：高さ：REM（106px）。

移動端末レイアウトREMに応答して

おすすめ