Detailed explanation of the new unit (vw) in css3

CSS3 vw unit

##Paste_Image.png

100vw = 100% window width

100vh = 100% window height

It will be quite simple to implement an adaptive square (a container with a fixed aspect ratio) in this way!

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

Since it is a new unit, there will inevitably be compatibility issues.

[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

Paste_Image.png

The normal effect of the code should be the picture on the left, to achieve a

picture placed in a square box, adaptive centeringHowever, in Android 4.4 mobile phones, the picture will be distorted, and the height is not calculated by .img-box, as shown in the picture on the right (
object-fit cover is also invalid under Android 4.4)

accidentally Found that the height error problem can be solved by setting

position<a href="http://www.php.cn/wiki/902.html" target="_blank"> absolute</a> to the image (object-fit cover is invalid)

[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 new

flex vw vh Makes the layout more flexible and more convenient Squares are no longer used
padding-bottom 100% A method that makes it difficult to understand.

Finally, I hope everyone will use chrome more and get away from IE as soon as possible

[Related recommendations]

1.

Free css online video tutorial

2.

css Online Manual

3.

php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Detailed explanation of the new unit (vw) in css3. For more information, please follow other related articles on the PHP Chinese website!