ビューポート単位: vw、vh、vmin、vmax_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ビューポート単位: vw、vh、vmin、vmax_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:51:41

オリジナル

1089 人が閲覧しました

CSS3 の人気により、特にモバイルデバイスでは、誰もが Viewport に精通するようになりました。今日は、このユニットはあまり目を引くものではありませんが、間違いなく便利です。使い方が素晴らしい。それらは、vm、vh、vmin、vmax です。

何のために欲しいのですか？ ?

フロントエンドの世界には新しいいたずらっ子がたくさんいますが、この人は何をしているのでしょうか?なぜそれを学ぶ必要があるのですか?

まずはデモを見てみましょう

よく見てください。ここで議論する価値のあるいくつかの点があります:

最初はテキストのサイズです:

注意深い友人なら、ウィンドウの幅が変わるとテキストのサイズも変わることに気づいたはずです。また、その逆も同様です。通常の状況では、CSS を使用してこの効果を実現するのはそれほど簡単ではありません。
2 番目は高さです:

従来の CSS の場合、灰色のボックスの高さは常に画面の高さと同じになります。次のように記述します:
```
html,body {    height: 100%;}.box {    height: 100%}
```
ログイン後にコピー
最初の 3 行は html と body の高さを指定します。なぜこれを行うのでしょうか。 DOM の高さは親ノードを基準に計算されるため、親ノードの高さを指定しない場合、子ノードの高さは 100% に達しません。

テキストの行の高さは常にウィンドウの高さと一致することに注意してください。

どうやって行うのですか？！

上記のデモを読んだ後は、それがどのように実装されているかを知りたくなるはずです。まず、メインコードが何行必要になるか考えてみましょう。

20行？ 10行？ 5行？

いいえ、コアコードは実際には 3 行しか必要ありません。！ショックを受けていますか? あはは、私たちが書いたものを見てみましょう:

html, body{  margin: 0;  padding: 0;}.title {  /*重要的3行代码*/  font-size: 5vw;  height: 100vh;  line-height: 100vh;  /********/  text-align: center;  background: grey;}

ログイン後にコピー

.title の最初の 3 行を除いて、残りはすべて省略できます。 3 行のコードで上記の効果を実現できるのは素晴らしいことではないでしょうか。

なぜ! ！

これら 3 行のコードを解決できる理由は主に、vw、vh、vmax、vmin のいたずらっ子たちの助けによるものです。それで、彼らは何をするのでしょうか？次の式を読めば明らかになるはずです:

1vw = ビューポート幅の 1 パーセント (ビューポート幅が 1200 ピクセルの場合、1vw は 12 ピクセルです)
1vh = 1 パーセント1 つのビューポートの高さ
1vmin = ビューポートの幅と高さの 100 分の 1 の小さい方 (ビューポートの幅が 1200px、高さが 800px の場合、800px は 1200px の小さい方であるため、1vmin は 8px に等しくなります)
1vmin = ビューポートの幅と高さの 1%

実は、これはまだ非常に単純な 4 つの公式です。「また 4 つの奇妙な単語、どうやって覚えるの?」とつぶやいているに違いありません。実際、注意深く見てみると、これらの単位は実際には 2 つの単語をつなぎ合わせたものであることがわかります (v = ビューポート、w)。 = width、h = height、幅は viewport + width = vh 、最大幅は viewport + max = vmax です。単位が 1% であることを覚えておいてください。これで完了です。