CSS_相対ユニット rem_html/css_WEB-ITnose

rem これは、ここ 1 ～ 2 年で増え始めた地味な CSS ユニットです。多くの学生が rem を使用しようとしていますが、使用中に落とし穴に遭遇して放棄した人もいます。しかし、rem に対する私の総合的な評価は、間違いなく Web アプリを作成するのに最も適した候補の 1 つであるということです。

レム、何ですか？

rem (ルート要素のフォント サイズ) は、ルート要素に対する相対的なフォント サイズの単位を指します。簡単に言えば、相対的な単位です。 rem を見ると、em 単位 (要素のフォント サイズ) を思い浮かべるでしょう。これは、親要素に対する相対的なフォント サイズの単位を指します。これらは実際には非常によく似ていますが、一方の計算ルールはルート要素に依存し、もう一方の計算ルールは親要素に依存して計算される点が異なります。

Web アプリで rem が使用されるのはなぜですか?

ここでは、Web アプリと Web ページでは rem を使用できないことを特に強調します。実際、もちろん使用できますが、互換性の理由から、Web アプリの下でこれを使用すると、このユニットの価値と機能がより強調されます。一部の企業は現在、Web アプリに画面適応をどのように実装していますか?

1. 強力な画面適応レイアウトの実現:

最近、iPhone 6 には 2 つのサイズの携帯電話がリリースされ、携帯電話の画面の種類がさらに混乱するようになりました。私はここ 1 ～ 2 年で Web アプリを作成する 1 つの方法を覚えています。以前は 320 幅を使用していました。規格に合わせるため、320 を超えるサイズは 320 の仕様で表示されます。ただし、この実装方法は淘宝網のウェブ アプリに代表されますが、最近、モバイルの淘宝網のホームページが改訂され、レムの単位が採用されました。ホームページは依然として存在しており、ページの幅が固定されたり、ページが流動的なレイアウトになったりするなど、以前と同じ混乱がありました。

ページ レイアウトを切り取るときに使用する一般的な単位は px です。これは絶対単位です。流動的なレイアウト、幅の制限、応答性など、Web アプリの画面適応にはさまざまな方法がありますが、これらのオプションはそうではありません。最良の解決策。

たとえば、流体レイアウト ソリューションには多くの欠点がありますが、さまざまな画面に適応できますが、ビジュアル デザイナーを完全に表示できる携帯電話のサイズは限られており、インタラクションが最も望ましい効果であるため、表示効果は非常に貧弱です。しかし、業界にはまだかなりの数の企業が Web アプリをカットするために私が集めた例を見てください:

1. Ctrip:

2. 3. Lanting

上記の Web サイトはすべて、流体レイアウト技術を使用して実装されています。ページをレイアウトするときに幅はパーセンテージで定義されますが、高さはほとんどピクセルで固定されているため、大画面のモバイルでの表示効果が低くなります。電話では、一部のページ要素の幅が非常に長く伸びますが、実際の表示は非常に調整されていません。これは、多くの場合、少数のサイズしかない流動的なレイアウトの最も致命的な欠点です。携帯電話で見られる効果は満足のいくものです。実際、大画面の携帯電話で見たときのデザイン図面の効果は横に引き伸ばされたのと同じであるため、多くのビジュアル デザイナーはこの効果を受け入れられないかもしれません。

流動的なレイアウトは、それを実装するための最も理想的な方法ではありません。多数のパーセンテージ レイアウトを使用すると、設計の開始時に流動的なレイアウトを考慮する必要があるため、多くの互換性の問題が発生することがよくあります。要素への影響を考慮すると、要素のレイアウトは横方向に拡張されたものしか設計できず、設計時に多くの制限があります。

2. 幅を固定する方法

初期には、ページ幅を 320 に設定し、余分な部分を空白のままにする別の方法もありました。従来のレイアウトがデザインのインスピレーションを制限する必要がなく、フロントエンドが欺瞞的な流動的なレイアウトに取り組む必要もありません。ただし、この解決策にはいくつかの問題があります。たとえば、大画面の携帯電話では、ページが非常に小さく見え、操作ボタンも非常に小さくなります。モバイル タオバオのホームページは当初このように作られていましたが、最近では rem を使用して改訂されました。

3. レスポンシブなアプローチ

この方法をモバイル側で使用している大企業の複雑な Web サイトはほとんどありません。その主な理由は、作業が大きく、メンテナンスが難しいためです。中小規模のポータルやブログ サイトは、レスポンシブな方法を使用して、Web ページから Web アプリに 1 ステップで直接移動します。これにより、コストが節約され、Web サイト専用の Web アプリ バージョンを作成する必要がなくなるからです。

4. ビューポートをズームに設定します

Tmall の Web アプリのホームページは、スケーリングのベンチマークとして 320 幅を使用し、基本スケーリングは 416 です。 iPhone 6 plus の画面と互換性があります。この方法はシンプルで大雑把ですが効率的です。正直に言うと、次に説明する rem を使用すると非常に効率的だと思います。ただし、一部の学生は、使用中にスケーリングによって一部のページ要素がぼやけてしまうと報告しました。

<br />

rem はすべての画面に均等に適応できます

上記では、現在ほとんどの企業で主流となっている多くの Web アプリ適応ソリューションについて説明しました。次に、rem がどのように機能するかについて説明します。

前述のように、rem はルート要素を通じて調整されます。Web ページのルート要素は html のフォント サイズを設定することで、rem のサイズを制御できます。例:

html{     font-size:20px; } .btn {     width: 6rem;     height: 3rem;     line-height: 3rem;     font-size: 1.2rem;     display: inline-block;     background: #06c;     color: #fff;     border-radius: .5rem;     text-decoration: none;     text-align: center;     }

Demo 上記のコードの結果ボタンのサイズは次のとおりです:

計算を容易にするために html を 10px に設定しました。なぜ 6rem が 60px に等しいのかです。この時点で .btn のスタイルが変更されていない場合は、HTML のフォント サイズの値を変更し、ボタンで上記の変更を確認します:

html{     font-size:40px; }

Demo

ボタン サイズの結果は次のとおりです:

上記の幅と高さ HTMLのfont-sizeを変更しただけですが、.の幅と高さのrem設定のプロパティは変更せずに、Web上のボタンのサイズが変更されました。ボタンスタイル。

実際、上記の 2 つのケースから、rem が 1px であることを計算できます:

最初の例:

120px = 6rem * 20px (ルート要素の最大値を設定)

2 番目の例:

240px = 6rem * 40px (ルート要素の最大値を設定します)

計算:

10px = ルート要素の 1rem (font-size = 10px の場合)

20px = 1rem (font-size の場合) = 20px) ;

40px = ルート要素の 1rem (font-size = 40px の場合); 上記 2 つの例では、最初のケースのボタンが 2 番目のボタンに比例して拡大され、HTML フォントがサイズの変更 これにより、ボタンに以前に設定された幅と高さを変更する必要はありません。なぜそう言えるのでしょうか。次に、例を見てみましょう:

デモ

上記 2 つのデモから、html のフォント サイズを変更すると、rem 単位を使用してすべての要素が均等に変更されることがわかります。そのため、Chrome ブラウザを使用できます。 デバッグを使用します。 3 番目のデモの表示効果をさまざまなデバイスで切り替えるツールを使用するか、ブラウザの幅を拡大して表示すると、解像度に関係なく、ページのレイアウトが同じ割合で切り替わることがわかります。レイアウトが乱雑ではありません。 js を使用してブラウザの現在の解像度に応じて font-size の値を変更するだけで、上記の効果を実現しました。ページのすべての要素を変更する必要はありません。

ここには、さまざまな解像度でのフォント サイズの値を計算する方法を尋ねている人がたくさんいるのではないでしょうか?

まず、上記のページデザイン案が標準サイズの 640 で渡されたとします (もちろん、このサイズは必ずしも 640 である必要はなく、320、480、または 375 の場合もあります)。テーブルのセット。

上の表の青い列は Demo3 のページのサイズです。ページは幅 640 でカットされています。さまざまな幅でのフォントサイトの値を計算する方法は次のとおりです。表の数値変化を見てみましょう。例: 384/640 = 0.6、384 は 640 の 0.6 倍なので、ページ幅 384 の下のフォント サイズもその 0.6 倍に等しくなります。このとき、384 のフォント サイズは 12px に等しくなります。 。さまざまなデバイスの幅も同じ方法で計算されます。

Demo3 では、ルート要素のフォント サイズを動的に計算するために JS を使用しました。これの利点は、現在、タオバオのホームページが計算に JS を使用していることです。しかし実際には、JS を使わずにアダプテーションを行うことができます。通常、Web アプリを作成するときは、まず Web サイトのメインストリーム スクリーン デバイスをカウントし、次に、たとえば次のように、アダプテーションを実現するためにそれらのデバイスのメディア クエリ設定を設定します。

html {     font-size : 20px; } @media only screen and (min-width: 401px){     html {         font-size: 25px !important;     } } @media only screen and (min-width: 428px){     html {         font-size: 26.75px !important;     } } @media only screen and (min-width: 481px){     html {         font-size: 30px !important;      } } @media only screen and (min-width: 569px){     html {         font-size: 35px !important;      } } @media only screen and (min-width: 641px){     html {         font-size: 40px !important;      } }

もちろん、上記の設定をすべてのデバイスに完全に適応させることはできませんが、JS を使用して完全に適応させることができます。どちらを使用するかは、実際の作業シナリオによって異なります。

以下では、rem テクノロジーを使用する 2 つの国内モバイル サイトを推奨します。現在、モバイル淘宝網のホームページのみが rem を使用しており、淘宝網ネイティブ アプリのホームページは埋め込み Web アプリのホームページです。

タオバオホームページ

: m.taovao.com

D 転載の際は出典を明示してください。ご協力お願いします。

ソース形式を指定します: Tencent ISUX (https://isux.tencent.com/web-app-rem.html)