レム適応レイアウト

レム適応レイアウト
 
    REMの基礎
         レムは、ユニットであります
            REM(ルートEM)は、EMと同様の相対単位であり、EMは、親要素のフォントサイズであります
            違いは、REMの参照は、HTML要素のフォントサイズに相対的であるということです
            例えば、ルート要素(HTML)フォントサイズ= 12ピクセル配置された非ルート要素は、セット幅:2rem; PXが24ピクセルを占めているに置き換えられています。
        REMは、素子サイズを変更するメディアクエリを検出することにより、HTMLテキストサイズ内部修飾することができるという利点であります
 
     報道関係お問い合わせ先
        メディアクエリ(メディアクエリ)は、新しいCSS3の構文です。
            1. @mediaクエリを使用して、異なるメディアタイプごとに異なるスタイルを定義することができます
            2. @メディアは、異なる画面サイズごとに異なるスタイルを設定することができます
            あなたは、プロセスのブラウザのサイズをリセットすると3、ページがブラウザの幅と高さに応じてページを再レンダリングされます
            現在の多くのiPhone、Android携帯電話、タブレット、その他のデバイスについて4.マルチメディアのために使用されています
 
     構文仕様
        @media MEDIATYPEない|のみ(メディア機能) {
            CSS-コード;
        }

 

         1.注始まる@mediaでの@記号
         2.mediatypeメディアタイプ
            メディアタイプと呼ばれる異なるタイプに、異なる端末装置、
                すべてのデバイスのすべて
                プリンタや印刷プレビューのための印刷
                コンピュータ画面、タブレットPC、携帯電話用画面のみ
         3.キーワードだけでなく、
            キーワードメディアタイプやメディアクエリとして一緒条件にリンクされている複数のメディアの特性
                1.and:メディア特性の複数の互いに接続されていてもよい「および」手段に相当
                2.not:メディアタイプを除くには、「非」との同等を省略することができ、
                3.only:特定のメディアタイプを指定して、省略することができます
         4.media機能メディアのプロパティは括弧を含める必要があります
            メディアの特徴:各メディアは、それらの異なる特性の固有の特性を持っている、メディアの特性の異なるメディアタイプの兵士に別のスタイルを設定します。私たちは3を理解しましょう。
            彼らは括弧が含まれている追加することに注意してください
                可視領域幅幅出力デバイス定義されたページ
                最小の可視領域の幅分幅の出力デバイス定義されたページ
                最大幅は、ページ幅の可視領域の最大出力装置を定義します
 
    資源の導入
        スタイルの範囲を比較すると、我々は、異なるメディアごとに異なるスタイルシートを使用することができます
        来て喜んで、リンクで直接デバイスのサイズ、その後は別のcssファイルを参照することが決定されます。
        <リンクのrel = "スタイルシート" メディア= "MEDIATYPEと|ない|のみ(メディアが備わっています)" のhref = "index640.css">
        我々は大規模なメディアクエリに小さく、最良の方法
 
     レム適応方式
        我々は目標にどのようなものです
        この目標量を達成する方法
        開発中の実際の使用で
            いくつかの要素は、デバイスのサイズは、比例適応現在のデバイスを変更した時に、幾何学的な適応を作ることができません
            html要素のサイズ変更は、フォントサイズが変更されるとき、適応の幾何学的なスケーリングを実現するように、異なるメディアクエリと比例HTMLフォントサイズを設定して複数のデバイス、および行うにはREMのディメンションを使用してページ要素を使用します。
 
     レム実際の開発適応方式
        デバイスの幅に設計案比例することにより、ルートHTMLを動的に計算し、フォントサイズのラベルサイズセット;クエリメディア
        CSS、REMの値の当量比に応じてドラフト設計要素の幅、高さ、および相対位置値。
        テクノロジー1 :以下メディアクエリレム
         テクノロジー2 :flexible.js REM(推奨)
         概要: 1. 2つのプログラムが今、この段階では、我々はコードをJSかを知る必要はありません、プログラム2 2より簡単に存在します。
 
    適応スキーム1
         一般的な設計案の幅寸法
            iphone 4 5 640ピクセル
            iPhone 6 7 8 750px
            アンドリュース装置5に320 360 375 384 400 414 500 720px 4.7アンドロイド最も720pxであります
        通常の状況下で、我々は、1つまたは2つの組のレンダリングは、画面、画面のほとんどに適応する、またはいくつかの効果を、彼らの極端な優雅な劣化をあきらめ犠牲にし、今は基本的に750が優先されています。
 
         2.動的htmlタグのフォントサイズのサイズを設定します
            1.デザイン案750pxを想定すると、
            2.我々は、画面全体を15等分されていると(その分割は異なる、また10であることができる20であることができます)
            3.各部門HTMLフォントサイズは、ここでは50pxであるとして
            4.だから、デバイス320PXは、フォントサイズ15分の320が21.33pxです
            私たちの異なるフォントサイズの大きさで割っ5.ページ要素は、そのHTMLまたは同じ割合を見つけるだろう
            例えば6、私たちの750の標準的な設計案
            7. 100×100ピクセルの画面のページ要素750は、REM 100/50 2remに変換され、* 2rem比が1:1であります
            下部画面8.320、HTMLフォントサイズ21.33 2rem = 42.66px 42.66ケースの幅と高さが幅と高さが、1:1の割合であるか、または
            9.が、ページボックスのスケーリング効果の異なる画面要素の下で達成することができました。
         素子サイズの値に記載の方法
            1.最終式:REM =ページ要素値のページ要素の値(PX)/(画面幅/分割部)
            画面幅/分割の2部分HTMLフォントサイズの大きさであります
            3.または:REM =ページ要素(ピクセル)/ HTMLフォントサイズフォントサイズのページ要素の値
 
    適応スキーム2
        より簡潔かつ効率的な適応スキームflexible.jsレム
            電話淘宝網、携帯端末アダプタライブラリのうち、効率的なチームプロフィール
            それは取引のJSを行っているので、私たちは、メディアクエリの異なる画面を記述する必要はありません
            その原理は、現在のデバイスは、10等分されることであるが、異なるデバイスにおいて、比率は同じです。
            私たちがしなければならない、HTMLテキストのサイズにすることができます私たちの現在の設備の良いを決定することです
            このような私たちは75px(750px / 10)に設定されているHTMLテキストサイズに必要なので、現在のドラフトは、750px関与しているとすることができ
            ページ要素の内部レム値:PX値ページ要素/ 75
            Flexible.jsが来て、残りの回数を聞かせて
        Vscodeプラグインcssremを追加するには、このプラグインはデフォルトでは、HTMLテキストサイズcssrootはとても我々の要求に応じて修正する、16pxにあります。

おすすめ

転載: www.cnblogs.com/solaris-wwf/p/11863742.html