説明するためにCSS単位:リアルへのWebフロントエンドエントリー

PX、REM、EM、私はあなたが絶対的な単位として、元に精通している確信している長さのような単位の%のように、後者は相対的な単位です。VW、VH、VMIN、VMAX:CSS3は新しいユニットを導入しました。ここでは、それらを詳細に説明しています。

ユニット 効果 プロパティ
PX 正確な画素表示することで、ページ 絶対単位
REM HTMLルート相対的なフォントサイズが計算されています 相対単位
親ノードのフォントサイズに対する基準点 相対単位
親要素の集合の大きさの比 相対単位
VW 窓の幅の比率は、ウィンドウの幅を1%の1vw代表 ウィンドウ単位
用品 ウィンドウの高さの比率、1%の1vh代表のウィンドウの高さ ウィンドウ単位
VMIN 現在の値が小さいほどVWおよびVH ウィンドウ単位
VMAX VHおよびVWの大電流値 ウィンドウ単位

チップ:VW、VHが、VMINは、VMAXは、ウィンドウ単位であり、相対的な単位です。これは、ルートまたは親ページの相対的ではありません。しかし、窓(ビューポート)によって同様の1%の代わりに、ユニット1の大きさを決定します。

言い換えれば、あなたは、Webブラウザのツールバーやボタンが含まれていません-ウィンドウ(ビューポート)は、お使いのブラウザは実際のエリアの内容が表示されています
ページは広い800ピクセル、400ピクセル= 50vh = 50%に提供されている場合。

区別のPX、EMとレム

PXは、ページサイズが変更された収まらない可能性があるため、一度設定し、固定ピクセルです。

レムEMと尊敬のPXとより柔軟な、それらは所定の長さ、デッドより適切なレイアウトに対応していないことを意味し、相対的な長さの単位です。

ルート要素レムに対する親要素、に関してEM:EMとREM文の間の差のために。

平均ルート(根本原因)中のR REMは、それを理解することは難しいことではありません。

の割合の間に2つ、VW、VH%の差

%は親要素に対して設定されたサイズの比である、VW、VHウィンドウサイズが決定されます。

VWの下で、VHの高度に直接得ることができるという利点が、本体の高さの%に設定されていない場合、右の視認性の高い領域ではないので、これは非常に優れた利点です。

web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

三、VMIN、VMAXの使用

モバイルページの開発を行うと、VW場合は、縦向きと横向きに表示されるフォントサイズが同じではありませんが、(例えば5vw用)フォントサイズを設定WH。
VMINとVMAXは現在、VWであり、小型・大電流VWとVHをVHので。ここでは、VMINとVMAXを使用することができます。ようにテキストサイズは、水平方向と垂直方向の画面で一貫しています。

おすすめ

転載: blog.51cto.com/14592820/2447574