モバイル端末レムユニット使用法_html/css_WEB-ITnose

1.rem (ルート要素のフォント サイズ) はルート要素に対する相対的なフォント サイズの単位を指し、em (要素のフォント サイズ) は親要素に対する相対的なフォント サイズの単位を指します。これらは実際には非常によく似ていますが、一方の計算ルールはルート要素に依存し、もう一方の計算ルールは親要素に依存して計算される点が異なります。どちらも相対単位です

2. 現在、ページ レイアウトを切り取るときに使用する一般的な単位は px であり、Web アプリの画面適応には次のような方法があります。たとえば、流体レイアウト ソリューションはさまざまな画面に適応できますが、表示効果が非常に優れていません。携帯電話のサイズが限られているためです。ビジュアル デザイナーやインタラクションが最も望む効果を完璧に表示できます。ただし、業界にはまだ、Web アプリをカットするために流体レイアウトを使用している企業がかなり多くあります。幅はパーセンテージで定義されますが、高さはすべてです。ほとんどがピクセルで固定されているため、大画面の携帯電話での表示効果は、一部のページ要素の幅が非常に長く引き伸ばされることになりますが、高さは以前と同じであり、実際の表示は非常に不安定になります。これは、流動的なレイアウトの最も致命的な欠点です。実際、デザイン図面のサイズが大きいため、多くのビジュアル デザイナーは、少数のサイズの携帯電話で見られる効果を満足できるものではありません。携帯電話の画面の下に見られる効果は、水平方向に引き伸ばされたのと同じです。

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

2. 幅を固定する方法

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

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

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

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

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

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

。

上記の Rem は、Web ページのルート要素を介して調整されます。HTML のフォント サイズを設定することで、Rem のサイズを制御できます。たとえば、

html{

font-size：20PX; rem;

display: inline-block;

background: #06c;

color: #fff;

border-radius: .5rem;

text-decoration: none;

text-align: center;

}

なぜ 6rem が 60px に等しいのか。この時点で .btn のスタイルが変更されていない場合、HTML の font-size 値を変更すると、ボタン (font-size: 40px; width: 240px) に上記の変更が表示されます。

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

最初の例:

120px = 6rem * 20px (ルート要素に大きな値を設定)

2 番目の例:

240px = 6rem * 40px (ルート要素に大きな値を設定)ルート要素の大きな値) )

1rem=ルート要素によって設定されたサイズ (px) など:

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

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

5. 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 に等しくなります。 。さまざまなデバイスの幅も同じ方法で計算されます。

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

html {

font-size : 20px;

}

@media のみの画面と (min-width: 401px){

html {

font-size: 25px !重要;

}

}

@media のみの画面と (min-width: 428px){

html {

font-size: 26.75px !重要;

}

}

@media のみの画面と (min-width: 481px ){

html {

font-size: 30px !重要;

}

}

@media のみの画面と (min-width: 569px){

html {

font-size: 35px !重要;

}

}

@media のみの画面と (min-width: 641px){

html {

font-size: 40px !重要;

}

}