第2のモバイル開発容易なピック、REMのレイアウト

まず、なぜレムのレイアウトを使用する必要があります

以前の私は、部数をフレックスレイアウトの利点を書き、配布配置テレスコピックコンテナボックスボックスは、レイアウトが容易、画面のズームによって、それが影響を受けず、中性子を占めました。しかし、いくつかのケースでは、必然的に高さの値を設定するためのボックスを与え、どのようにそれをスケーリングして、画面サイズの変更の高さの比率をしますか？また、どのように画面のサイズとページのテキストサイズの変更を行い、それをズームするには？レムのレイアウトが簡単にこの問題を解決することができます。

第二に、原則レムレイアウト

1.rem

私たちはまず、REMが何であるかを理解しなければなりませんREM（ルート1rem値はフォントサイズのhtmlページのサイズであり、EM）は相対的単位です。我々は、フォントサイズのページのサイズを制御することにより、ズーム比と他のページ要素を作ることができるようなレイアウトでは、局所使用のREMは、基本単位として幅と高さを設定します。

2.メディアからの問い合わせが少ないです。（理解としてはあまり内容）

CSS3メディアクエリを使用すると、異なるメディアタイプごとに異なるスタイルを定義することができる新しい構文、使用@mediaクエリ、です。REMレイアウトで、画面サイズが変更、フォントサイズの決意のHTMLの値に基づいています。

以下（LeanerStyleシートの略語）は、CSSの拡張言語、CSSプリプロセッサとなっています。これは、上記のCSSの構文に基づいて、ある変数、（混合）ミックスインと同様に、動作機能およびその他の機能の導入に大きく、CSSの準備を簡素化し、CSSのメンテナンスコストを削減します。

REMの値を計算する（ボックスの幅及び高さは、PX / 1remは値REMを表すPX =幅と高さの値を占めた値）は、主に以下のREMレイアウトファイルで使用されています。EasyLess自動的少ないCSSファイルと同じ名前のファイルを生成することができ、プラグインvscodeをインストールし、ページ内のCSSを導入することができます。以下のファイルの機能を置き換えることができます。しかし、この変換はあまりにも面倒で、我々は通常flexible.js開発を使用しています。

3.flexible.js

flexible.jsのjsファイルは良いパッケージです。あなたは直接、劣らず文書が計算されていないどのくらいpxとレム値の間の変換のための値に等しいピクセルの1rem値を計算することができます。原理は、画面の大きさは、スクリーンサイズが変化すると、ページ要素がREMの幅と高さを表すことになっている、10等分、各値1remのサイズに分割され、ページ要素がスケーリングされています。しかしcssrem固定サイズの内部フォントサイズのグローバルセットを設定するflexible.js進歩を使用して、一般的に10で割ったドラフト大き。

第三に、例

次のような効果を達成するために1がある、我々は、ページのサイズとスケーリングに応じてその要素を見つけることができます。

以下750pxの画面：

500pxなどの画面効果の下で：

2.実装

REMのレイアウトを達成するための2つの方法があり、一つ目はレム+少ない+メディアクエリが、多くの問題の観点から少ないので、私たちはしばしば秒を使用しています。第二の場合は、この論文では、この方法を用いて行われる、REM +柔軟です。

3.ステップ。

そして、建物は最初の（デフォルト設定のフォントサイズ750px / 10 = 75pxに設定された最初のページ）flexible.jsページ構造を導入しました。

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0、ユーザースケーラブル=いいえ、最大規模= 1.0、最小スケール= 1.0" > 
    < メタHTTP-当量= "X-UA-互換" コンテンツ= "IE =縁" > 
    < タイトル> REM布局详解</ タイトル> 
    <>       <！ - 画面上のflexible.js 1rem決意値の導入- > 
    < リンクのrelは= "このスタイルシート" のhref = "CSS / normalize.css" >     <！ - 一般的なパターンの導入- > 
    < リンクのrel = "このスタイルシート" のhref =" CSS / index.css " >     <！ - 組み込まれたCSSスタイル- > 
</ ヘッド> 
< 身体> 
    < ヘッダ> 
        < スパンクラス="分類" > </ スパン>       <！ - 左カテゴリーは、サイン- >
        < フォームアクション=「」>                     <！ - 中間検索ボックス- > 
            < INPUTの種類= "検索" プレースホルダ= "ダブル11を購入" > 
        </ フォーム> 
        < A HREF = "＃" クラス= "ログイン" >ログイン</ A >    < ！ - ログインのロゴの右側- > 
    </ ヘッダ> 
</ ボディ> 
</ HTML >

そして、次のようにCSSスタイルがあるの書き込み：

PS。PXの値に対応するページを書くときに私たちのスタイルで書き、レムが直接値に対応して生成され、次のコードは、長レムの単位で見ることができますflexible.js。

メディアクエリを追加する最初のステップ、。ページは、ドラフトデザインの幅よりも大きい場合に設け、また、設計案フォントサイズの幅寸法に応じて提供。HTML形式のフォントサイズを簡単に設定覆われているので、追加！重要遂行する権利を言及します。

@media画面と（最小幅：750px） { 
    HTML { 
        フォントサイズ：！75px重要。
    } 
}

ステップ2：身体改造。すなわち、設計案10remボディ幅であれば。そして、画面上のズーム。

本体 {   
    幅：10rem。
    マージン：0自動 ; 
}

第三段階：ヘッダー書き込み、固定された位置を使用します。

ヘッダ { 
    ディスプレイ：フレックス ;   / * 親伸縮カートリッジボックスレイアウト属性が追加* / 
    位置：固定 ; 
    トップ：0 ; 
    左：50％ ; 
    変換：移動X（-50％） ; 
    幅：10rem ; 
    高さ：1.173333rem、
    バックグラウンド色：＃ffc001 ; 
}

IV：残りのコードは次のように：

* { 
    マージン：0 ; 
    パディング：0 ; 
} 
.classify { 
    幅：.586667rem ; 
    高さ：.933333rem ; 
    背景：URL（../イメージ/ classify.png）NO-REPEAT、
    背景サイズ：.586667rem ; 
    マージン：.333333rem .093333rem .146667rem ; 
} 
ヘッダ形式 { 
    フレックス：1 ;     / * サブ排他カートリッジ1部分の残留空間* / 
}
入力ヘッダ { 
    幅：100％ 。
    高さ：.906667rem。
    マージントップ：.133333rem。
    国境半径：.453333rem。
    背景色：＃1 fff2cd。
    パディング左：.746667rem。
    フォントサイズ：.32rem。
    国境：なし ;   / * 去除边框和轮廓线* / 
    概要：なし。
} 
の.login {
     / *表示：ブロック;父テレスコピックカートリッジボックスのレイアウトは、必要はありません* / 
    マージンは：.133333rem .266667rem ; 
    高さ：.906667rem ; 
    行の高さ：.906667rem ; 
    フォントサイズ：.333333rem ; 
    色：#FFF ; 
    テキストベース装飾：なし ; 
}

4：要約

任意の長さの、我々が見ることができレム明らかな利点は、そのようなページ要素としてレムユニットを、交換することができるページサイズの変更をスケーリングすることができます。ハイブリッドフレックス+ REMモードの開発に通常実際の開発。

第2のモバイル開発容易なピック、REMのレイアウト

おすすめ