rem: Web アプリ適応の秘密兵器_html/css_WEB-ITnose

最近、この質問を目にしました。サイズが 750 x 1500 のデザイン ドラフトがあります。デザイン ドラフトには 150 x 50 のボタンがあります。では、デザイン ドラフトを作成するときにボタンをどのように決定すればよいですか。ページのレイアウトはどうでしょうか？ 。ほとんどの生徒は答えるときにレムについて言及しました。 REMというユニットがとても気になります。さて、まだあまり馴染みがありません。

さて、レムとは一体何なのかという疑問が生じます。レムはどんな問題を解決するために存在しているのでしょうか？レムは私たちにどのような利便性をもたらしてくれるでしょうか？このような問題を抱えて、rem の記事をたくさん勉強しました。その後、たまたま仕事でモバイル ページが必要になったので、rem を使用して小さなページの適応を完了しようとしました。

ここをクリックして rem 適応デモを表示できます。Chrome のデバイス モジュールの下で開き、さまざまな携帯電話のエミュレータを切り替えて、さまざまなサイズの違いを確認することをお勧めします。

レムとは？

rem は、ルート要素のフォント サイズに相対的な CSS 単位です。 pxと同様に、フォントサイズと長さの単位を設定するために使用できます。ルート要素に対する相対的なフォント サイズは何を意味しますか?

例を挙げてみましょう。ページでは、html 要素がルート要素であるため、最初に html のフォント サイズを設定します

html { font-size: 100px; }

したがって、ページ全体では、次のような変換式が存在します: 1rem = 100px

つまり、ボタンが次の CSS スタイルを持つ場合、その幅は 100px、高さは 50px であることに相当します。

btn { width: 1rem; height: 0.5rem; }

これがすべてのレムについての真実のようです。 ！ ！ ！何？これで終わりですか？これとpxの違いは何ですか？はい、これと px の間に特別な違いはありません。それは単なる測定単位です。そこで、質問した学生は、750x1500の設計図を持ってきて、150x50のボタンのページにどのくらいのサイズを書くべきか尋ねました。pxを使用する場合は75x25、remを使用する場合は0.75 x 0.25となります。

しかし明らかに、レムはまだ他にもいくつかの機能があります。

レムはどのような問題を解決するために存在していますか?

さまざまな iPhone のサイズを例に挙げると、iPhone4 と 5 の幅は 320px、iPhone6 は 375px、iPhone6 plus は 414px です。ボタンのサイズが 75x25 に固定されている場合、それは 414px です。サイズが異なると必然的に相対的な違いが生じます。これがもたらす問題は、デザインの美しさに直接影響することです。おそらく、iPhone 6 では完璧なデザインでも、iPhone 5 ではかなり劣ってしまうでしょう。 デバイスの幅が変化したときにページ要素のサイズも変化できるようにするために、rem が表示されるためです。

rem の相対的なサイズが HTML 要素のフォント サイズに関係していることはすでにわかっています。 rem アダプテーションを使用する原理は、デバイスの幅が変わったときに HTML のフォント サイズを調整するだけで済み、それに応じて rem 単位を使用するページ上のすべての要素が変更されるということです。 これがremとpxの最大の違いでもあります。

HTML要素のサイズを調整するには、cssとjsの2つの方法があります。

css メソッド

html { font-size: calc(100vw / 3.75) }

100vw は、フォント サイズを確保するために、iPhone6 の幅 375px を標準として、デバイスの幅を 3.75 で割った値を表します。 htmlのサイズは100pxです。このように変換すると、1pxは0.01remとなり、計算が簡単になります。

Chrome での最小フォント サイズは 12 ピクセルであるため、HTML のフォント サイズを 1 ピクセルまたは 100 ピクセルに設定することはできません。

JS メソッド、原理は CSS と同じですが、一部の古いモバイル ブラウザーではサポートされていない calc、vm 属性を避けるために、実際のアプリケーションでは js を使用するのが最善です。

document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';$(window).on('resize', function() {   document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';})

##### 注意事項

1. rem の適用範囲は非常に限定されており、モバイル端末でのみ表示されるページにのみ使用できます。ページを PC に適合させる必要がある場合は、素直に px を使用してください。

2. 私はモバイル端末でのみページを使用しますが、他の人はPCでページを開くため、htmlの最大幅と最小幅を設定できます。 580pxは携帯電話のブラウザの最大幅です。

html {   max-width: 580px;   min-height: 320px;}

3. 一部の学生は Web 適応について誤解を持っている可能性があります。 Web での適応では、物理ピクセルや dpi などの概念を考慮する必要はありません。これらは、Android または iOS のネイティブ アプリでのみ考慮する必要があります。これらの誤解により、多くのデザイン学生が Web アプリをデザインする際に 1080 x 1920 のデザイン ドラフトを渡されてしまい、非常にイライラさせられます。

それでは、この質問に戻りますが、デザインドラフトが 750x1500 の場合はどうすればよいでしょうか?実際、これは悪くなく、750 は iPhone6 の幅である 375 のちょうど 2 倍です。したがって、測定したサイズを2で割るだけです。 1080x1920 などの非常に大きなサイズの場合はどうなりますか? 1. まず、デザイン案全体を保存します。jpg 2. 幅 375 ピクセル、高さ 1000 ピクセルの新しい PSD を作成します (高さはもっと高くても問題ありません) 3. 保存したデザイン案.jpg をそこに放り込みます。この方法で測定されたページ要素のサイズが、必要なサイズになります。

ps: 最良の方法は、デザイナーに Sketch を使用してデザイン ドラフトを作成させることです。