CSS implements adaptive square

IT Cultivation Institute CSS Task 1: Jiugongge

An adaptive nine-square grid needs to be completed. The grid changes with the size and width of the window and will not be deformed.

The width of the grid can be set in percentage, but what about the height?
Option 1: Set the padding in the vertical direction
In the box model, the percentage values ​​of margin and padding are calculated relative to the width of the parent element , so set the padding value to the same percentage as the width value.

.box{
    width:50%;
    height:0;
    padding-bottom:50%;
    background-color:lightblue;
}

Option 2: Use vw [browser compatibility is not good]
A new set of length units vw, vh, vmin, vmax are added to CSS3 relative to the percentage of the visible area. 1vw = 1% viewport width; 1vh = 1% viewport height

.box{
    width:50%;
    height:50vw;
    background-color:lightblue;
}

Option 3: By setting the margin of the pseudo element

.box{
    width:50%;
    background-color:lightblue;
    overflow:hidden;
}
.box:before{
    content:'';
    display:block;
    margin-top:100%;
    }

Specific reference: Pure CSS3 realizes adaptive square