CSS3でレムを使う方法

rem は、HTML 要素のフォント サイズの単位に対する相対的なサイズ値であり、構文形式は「要素: 数値 rem」です。 rem はブラウザのフォント サイズを変更するため、Web ページのレイアウトが崩れます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 では、新しい相対単位 rem が追加されました。rem を使用することは、相対フォント サイズ単位としての em と同じです。これは、ルート要素のフォント サイズの単位に対する相対単位です。率直に言って、それは HTML 要素のフォント サイズに相対的な単位です。

利点: サブ要素のサイズを計算するときは、HTML 要素のフォント サイズに基づいて計算するだけで済みます。 em を使用しているときとは異なり、頻繁に計算するために親要素のフォント サイズを見つけるために何度も行ったり来たりする必要があり、電卓がなければまったく実行できません。

rem はユニットです

CSS3 の出現に伴い、彼は今日 rem と呼ばれるものを含むいくつかの新しいユニットも導入しました。 Rem は、W3C 公式 Web サイトに「ルート要素のフォント サイズ」のように説明されています。レムについて詳しく見ていきましょう。

rem はルート要素 に相対的です。つまり、ルート要素で参照値を決定し、ルート要素でフォント サイズを設定するだけで済みます。これは、完全にユーザーの設定に基づいて行うことができます。

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

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

ルート要素 < に a を定義しました。 ;html> 基本的なフォント サイズは 62.5% (つまり 10px。この値を設定するのは主に計算を容易にするためです。設定されていない場合は「16px」に基づきます)。上記の計算結果から、「rem」を「px」と同じように便利に使用できると同時に、「px」と「em」の違いを解決することができます。

rem の使用

最初にこのタグを追加する必要があります:

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

具体的な意味は次のとおりです:

initial-scale - 初期スケーリングRatio minimum-scale - ユーザーがズームできる最小の比率 Maximum-scale - ユーザーがズームできる最大の比率

次に、HTML のフォント サイズを設定します。

// resize 窗口大小发生改变的时候才会触发的，第一次加载时不会触发
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    // 手机屏幕是否反转orientationchange
    window.addEventListener(resizeEvt, setFontSize, false); // IE 谷歌
document.addEventListener('DOMContentLoaded', setFontSize, false); //火狐
function setFontSize() {
    var cWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var basicNum = 200;
    var htmlFontSize = basicNum * (cWidth / 设计稿宽度);
    document.documentElement.style.fontSize = htmlFontSize + 'px';
}

一般的なデザイン ドラフトの幅は 750 です。開発プロセスでは iPhone 6/7/8 をベンチマークとして使用したため、HTML のフォント サイズは 200*(375/750)= になるはずです。 100px; つまり、デザインドラフトに幅 200px のボックスがある場合です。幅を (200/100)rem に設定する必要があるため、計算が簡単なので、basicNum を 200 に設定することをお勧めします。

var htmlFontSize=basicNum*(cWidth/设计稿宽度);

画面サイズが広くなるほど、ルート HTML のフォント サイズが大きくなることがわかります。他の要素は

#これに基づいているため、適応可能です。

ブラウザの互換性

rem は CSS3 で導入された新しい測定単位であり、ブラウザのサポートについて誰もが不満や不安を感じることでしょう。実際、心配する必要はありません。Mozilla Firefox 3.6、Apple Safari 5、Google Chrome、IE9、Opera11 など、サポートされているブラウザが多数あることに驚かれるかもしれません。

ただし、単位を使用してフォントを設定する場合、IE を完全に無視することはできません。この REM を使用したいが、IE での効果と互換性を持たせたい場合は、「px」と「」の使用を検討できます。 IE6 ～ 8 で効果を実現するには「px」を使用し、ブラウザの効果を実現するには「Rem」を使用します。

推奨学習:

css ビデオ チュートリアル

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