CSS3 vw ユニット

css3の新ユニット(vw)の詳細説明

Paste_Image.png

100vw = 100% ウィンドウの幅
100vh = 100% ウィンドウの高さ

この方法では、アダプティブスクエア (アスペクト比が固定されたコンテナ) を実装するのが非常に簡単になります。 )!

[lang=stylus]
.box
  width 10vw
  height 10vw

ログイン後にコピー

新しいユニットであるため、必然的に互換性の問題が発生します。

[lang=jade]
.img-box
  img(src="img/a.png")

ログイン後にコピー

[lang=stylus]
.img-box
  width 10vw
  height 10vw
  img
    width 100%
    height 100%
    object-fit cover

ログイン後にコピー

css3の新ユニット(vw)の詳細説明

Paste_Image.png

コードの通常の効果は、左側に示すようになり、正方形のボックスを実現する必要があります。ただし、Android 4.4 の携帯電話では、右の図に示すように、画像が歪み、高さが .img-box によって計算されません (object-fit cover も Android 4.4 では無効です) Set <a href="http://www.php.cn/wiki/902.html" target=" を渡すことができることを偶然発見しました。高さエラーの問題を解決するための画像の _blank">絶対位置<br/> (object-fit cover が無効です)object-fit cover 在安卓 4.4 下也无效的)

偶然发现可以通过给图片设置 <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a> absolute 解决高度错误问题 (object-fit cover 无效)

[lang=stylus]
.img-box
  width 10vw
  height 10vw
  position relative
  img
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    object-fit cover

ログイン後にコピー

css3 新的 flex vw vh 让布局灵活方便很多
正方形不再使用 padding-bottom 100%rrreee

css3 new flex vw vh でレイアウトがより柔軟で便利になります

正方形は使われなくなりました padding-bottom 100% わかりやすい方法です

最後に、皆さんがもっと Chrome を使って、できるだけ早く IE から抜け出すことを願っています

【関連する推奨事項】1.

CSS オンラインマニュアル

3. Dugu Jiijian (2) - CSS ビデオチュートリアル

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