A detailed description of the new unit (VW) in CSS3

CSS3 VW units

Paste_image.png

100VW = 100% window width
100VH = 100% Window height

This enables an adaptive square (a container with a fixed length-to-width ratio) to be quite simple!

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

Since it is a new unit, there is bound to be a compatibility issue.

[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 on the left, to implement a square box to put a picture, adaptive centering
However, on Android 4.4, images will be distorted, and the height is not calculated in. Img-box, as shown on the upper right ( object-fit cover not valid on Android 4.4)

Accidental Discovery can position absolute resolve height error problem by setting picture ( object-fit cover 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 make layout flexible and convenient many
The square no longer uses padding-bottom 100% the method which lets the person see not easy to understand

Finally, I hope you will use Chrome to get rid of IE soon

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial