CSSのレムとは何ですか

css rem は CSS ユニットです。rem の完全な英語名は「ルート要素のフォント サイズ」で、ルート要素に対する相対的なフォント サイズの単位を指し、em は相対的なフォント サイズの単位を指します。親要素へのフォントサイズの単位。

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター。

推奨事項: 「css ビデオ チュートリアル 」

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

レムとは何ですか？

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

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

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

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

最近、iPhone 6 が 2 つのサイズの携帯電話でリリースされたため、携帯電話の画面の種類がさらに混乱しています。 1〜2年前にウェブの仕事をする アプリを適応させる1つの方法は、標準として幅320を使用することです. サイズが320を超えても、320の仕様で表示されます. この実装方法はタオバオウェブアプリに代表されますが、最近ではモバイル タオバオのホームページが改訂され、rem が使用されています。 このユニットでは、ホームページは以前と同様に固定幅のページと流動的なレイアウトのページがあり、依然としてわかりにくいです。

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

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

1.Amazon

2 .Ctrip

3.Lanting

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

流動的なレイアウトは、それを実装するための最も理想的な方法ではありません。多数のパーセンテージ レイアウトを使用すると、多くの互換性の問題が頻繁に発生します。また、設計には多くの制限があります。流体レイアウトが要素に及ぼす影響を考慮すると、水平方向に引き伸ばされた要素レイアウトのみを設計でき、設計時に多くの制限があります。

2. 固定幅方式

もう一つの方法は、ページ幅を固定する方法で、初期のウェブサイトではページ幅を 320 に設定し、余分な部分を空白のままにすることがありました。幸いなことに、ビジュアル デザインは流動的なレイアウトによって制限される必要がなくなり、フロントエンドは欺瞞的な流動的なレイアウトに関与する必要もなくなりました。しかし、このソリューションでは、大画面の携帯電話ではページの両側に余白ができてしまう、大画面の携帯電話ではページが非常に小さく見える、操作ボタンも非常に小さいなどの問題があります。モバイル タオバオのホームページは当初このように作られていましたが、最近では rem を使用して改訂されました。

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

中国の大企業の複雑なウェブサイトでは、モバイル端末ではレスポンシブアプローチがほとんど採用されていません。主な理由は、作業が大きいためです。メンテナンスが困難なので、一般的に小規模です。中規模のポータルやブログ サイトは、コストを節約でき、独自の Web サイト専用の Web アプリを構築する必要がなくなるため、レスポンシブ方式を使用して 1 ステップで Web ページから Web アプリに直接移動します。

4. ビューポートをスケーリング用に設定します

Tmall の Web アプリのホームページはこのようにして作成されています。幅 320 を基準にスケーリングされています。最大スケーリングは 320*1.3 = 416 です。基本的に 416 までのスケーリングは iPhone6 plus の画面と互換性があります. 、この方法は単純で、粗雑で、効率的です。正直なところ、次に説明する rem を使用すると非常に効率的だと思いますが、一部の学生は、使用中にスケーリングによってページ要素の一部がぼやけてしまうと報告しました。

rem はすべての画面に同じ割合で適応できます

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

上で述べたように、rem はルート要素によって調整されます。Web ページのルート要素は html を参照します。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;
}

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

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

実際、上記の 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 でカットされています。さまざまな幅で font-site の値を計算するにはどうすればよいですか?表の数値変化を理解します。例：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.taabao.com

D X: m.dx.com

以上がCSSのレムとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。