モバイル Web への適応 rem_html/css_WEB-ITnose

はじめに

rem というと、まず rm や px という言葉が思い浮かびますが、これらの単位はフォントのサイズを設定するために使用されると考えている人が多いでしょう。間違いです。これは確かにフォント サイズの設定に使用されますが、rem の場合はモバイル端末の応答性の調整に使用できます。

互換性

まず互換性を見てみましょう。ほとんどの主流ブラウザがサポートしているので、安心して読み進めることができます。

rem はフォント サイズを設定します

rem は (ルート要素のフォント サイズ)、公式の説明では Web ページの要素に応じてフォント サイズを設定することを意味し、em (フォント要素のサイズ ) は、em が親要素のフォント サイズに基づいてフォント サイズを設定するのに対し、rem は Web ページの要素 (html) に基づいてフォント サイズを設定します。簡単な例を挙げると、現在、ほとんどのブラウザには次のものが含まれています。 IE9+、Firefox、Chrome、Safari、Opera では、関連するフォント設定を変更しない場合、デフォルトの表示フォント サイズは 16 ピクセル、つまり

html {    font-size:16px;}

html{    font-size:16px;}

そこでPタグを付けたい場合 フォントサイズを12pxに設定するには、remを使って

p {    font-size: 0.75rem; //12÷16=0.75（rem）}

p{    font-size: 0.75rem; //12÷16=0.75（rem）}

と書きます。 基本的にはremという単位を使いますフォントサイズを設定するのは基本的にこのルーチンです。利点は、ユーザー独自のフォントサイズを追加することです。ブラウザのデフォルトのフォントサイズが変更され、rem を使用するときに調整されたサイズに従って表示できるようになりました。

しかし、rem はフォントに適用できるだけでなく、幅、高さ、マージンなどの単位にも使用できます。それについて詳しく話しましょう

レム画面適応

レム画面適応について話す前に、モバイル端末適応の一般的な方法について話しましょう。 一般的に次のように分けられます。

1 より単純なページの場合、通常、高さは固定値に直接設定され、幅は通常、画面全体に表示されます。

2 もう少し複雑なのは、パーセンテージを使用して適応する要素のサイズを設定するか、flex やその他の CSS を使用してカスタマイズが必要な幅を設定することです。

3 より複雑で応答性の高いレスポンシブ ページの場合、css3 のメディア クエリ属性を使用して適応させる必要があります。一般的な考え方は、さまざまな画面サイズに応じて対応する CSS スタイルを設定することです。

上記のメソッドの一部は実際に画面適応などの問題を解決できますが、新しい rem が登場したため、これらの側面も考慮する必要があります。rem の具体的な使用方法について説明します。

rem 適応

最初に簡単な例を見てみましょう:

.con {      width: 10rem;      height: 10rem;      background-color: red; }<div class="con">        </div>

.con {      width: 10rem;      height: 10rem;      background-color: red; }<divclass="con">        </div>

これは div で、幅と高さは rem を使用して設定されますブラウザでは次のように表示されます。

ブラウザでは、幅と高さがそれぞれ 160 ピクセル、つまり正確に 16 ピクセル * 10 であることがわかります。要素はデフォルトのフォントサイズを変更しますか?

html {    font-size: 17px;}.con {      width: 10rem;      height: 10rem;      background-color: red; }<div class="con">        </div>

html {    font-size: 17px;}.con {      width: 10rem;      height: 10rem;      background-color: red; }<divclass="con">        </div>

結果を見てみましょう:

この時点では、幅と高さは両方とも 170px です。つまり、rem は、width と height を適用するときに、ルート要素の font-size の値に応じて、rem 自体の値が変更されるという性質を持っています。 CSS スタイルを実現するための HTML の値。

rem 数値計算

rem を使用して CSS 値を設定する場合、通常、たとえば長さと div を設定したい場合は、計算のレイヤーを通過する必要があります。幅が 100px の場合は、計算する必要があります。100px に対応する rem 値は 100 / 16 =6.25rem です。CSS を記述する場合、これは実際には比較的複雑な手順ですが、実際には問題ありません。

現在のプロジェクトについて考えてみましょう。フロントエンドの構築では、scss を完全に使用してこの問題を解決できます。たとえば、scss 関数 px2rem を記述できます。 🎜>

@function px2rem($px){    $rem : 37.5px;    @return ($px/$rem) + rem;}

@function px2rem($px){    $rem : 37.5px;    @return ($px/$rem) + rem;}

このようにして、特定の値を書くときは次のように書くことができます。

height: px2rem(90px);width: px2rem(90px);;

height: px2rem(90px);width: px2rem(90px);;

これを見ると、あなたは理解できないのは、上記の rem:37.5px がどこから来たのかということです。これは通常の状況ではデフォルトの 16px ではないでしょうか。これは実際にはページのベンチマーク値であり、HTML のフォントサイズに関連しています。 。

rem ベンチマーク値の計算

rem のベンチマーク値、つまり上記の 37.5px については、主に次の理由により、実際に入手したビジュアル ドラフトに基づいて決定されます。 >

1 私たちが作成するページは、さまざまな画面サイズのデバイスで実行されるため、

2 したがって、スタイルを作成するときは、まず特定の画面を参照する必要があります。これはビジュアルに依存します。取得したドラフト

3 取得したビジュアルドラフトが iPhone6 の画面に基づいてデザインされている場合

4 iPhone6 の画面サイズは 375px、

rem = window.innerWidth  / 10

このようにして計算されたレム基準値は 37.5 (iphone6 モックアップ) ですが、なぜここでこの値が 10 で割られていないのかというと、そうではありません。 10 とすると、計算したベンチマーク値が大きすぎるので、HTML のフォントサイズを設定する際に、ブラウザのフォントサイズが 12px 未満の場合、効果が得られないことがわかります。モバイル

rem = window.innerWidth  / 10

iphone3gs: 320px / 10 = 32px

用の他の

が表示されます。

iphone4/5: 320px / 10 = 32px

iphone6: 375px / 10 =37.5px

动态设置html的font-size

现在关键问题来了，我们该如何通过不同的屏幕去动态设置html的font-size呢，这里一般分为两种办法

1 利用css的media query来设置即

2 利用javascript来动态设置

根据我们之前算出的基准值，我们可以利用js动态算出当前屏幕所适配的font-size即：

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

然后我们看一下之前那个demo展示的效果

.con {      width: px2rem(200px);      height: px2rem(200px);      background-color: red;}<div class="con">        </div>document.addEventListener('DOMContentLoaded', function(e) {                document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';}, false);

.con {      width: px2rem(200px);      height: px2rem(200px);      background-color: red;}<divclass="con">        </div>document.addEventListener('DOMContentLoaded', function(e) {                document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';}, false);

iPhone6下，正常显示200px

在iphone4下，显示169px