css3 中量ユニットの使用の違い

今回は、CSS3 ミドルウェイト ユニットの使用の違いについてお届けします。CSS3 ミドルウェイト ユニットを使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。

px: 絶対単位、ページは正確なピクセルで表示されます

em: 相対単位、参照点は親ノードのフォント サイズです。

font-size を定義すると、それ自体で計算されます (ブラウザーデフォルトのフォントは 16px)、1em はページ全体で固定値ではありません。

rem: 「ルート em」として理解できる相対単位。CSS3 には新しい属性があり、chrome/firefox/IE9+ でサポートされています。

(

なお、Chromeは最小フォントサイズを強制的にサイズ12にすることに注意してください。10pxに設定しても、最終的には12pxで表示されます。HTMLのフォントサイズが10pxに設定されている場合、子ノード rem の計算は依然として 12px に基づいているため、オンラインで多くの計算が行われます。この記事では、html の font-size を 10 に設定することは、計算を容易にするためにあまりお勧めできないと述べられています)。

remはタオバオのモバイルアプリケーションページを参照できますhttp://m.taovao.com (HTMLのフォントサイズは動的計算によって取得されます)

ページベンチマーク320px (20px)、html font - サイズ値の計算:

var ele=document.getElementsByTagName("html")[0],    
     size=document.body.clientWidth/320*20;    
ele.style.fontSize=size+"px"

注: メタ スケーリング比は 1:1 に設定する必要があります

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

vw: 視点の幅、ウィンドウの幅、1vw はウィンドウの幅の 1% に等しくなります。

vh: 視点の高さ、ウィンドウの高さ、1vh はウィンドウの高さの 1% に相当します。

vmin: vw と vh の小さい方。

vmax: vw と vh の間の大きい方。

vw、vh、vmin、vmax: IE9+ 部分サポート、chrome/firefox/safari/opera サポート、iOS safari 8+ サポート、

Androidbrowser4.4+ サポート、chrome for android39 サポート

その他のユニットには以下が含まれます:

%: パーセンテージ

in: インチ

cm: センチメートル

mm: ミリメートル

pt: ポイント、約 1/72 インチ

pc: pica、約 6pt、1/6 インチ

ex: 現在の値を取る効果フォントの x 高さが決定できない場合、効果フォントの x 高さは 0.5em として計算されます (IE11 以下ではサポートされていない、Firefox/chrome/safari/opera/ios safari/android ブラウザ 4.4 以降などはすべてサポートされている必要があります)。属性の追加 (プレフィックスはありますか)

ch: ノードで使用されるフォントの「0」文字に基づき、見つからない場合は 0.5em (ie10+、chrome31+、safair7.1+、opera26+、iOS safari) 7.1 以降、Android ブラウザ 4.4 + サポート)

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSS3のシャドウボックスシャドウ関数の使用方法の詳細な説明

3Dアルバムエフェクトの実装

CSSでzoom属性またはoverflow:autoを使用する方法

2Dシミュレーション観覧車の回転アニメーション特殊効果を実現

以上がcss3 中量ユニットの使用の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。