Example tutorial using CSS to maintain page content aspect ratio method

This article illustrates the use of CSS to maintain page content aspect ratio method, the author of the Pseudo-element and VW unit, and other different methods under the example, the need for friends can refer to the next

Requirement Description: The mobile implementation spans the half-circle of the page. (similar to the problem, implement a 4x4 square grid)

Simplifying the problem, we can understand it to achieve a block with a height and width ratio of 1:2.

Need to solve the problem:

1, height and width according to a certain proportion.

2, outer container height and width are uncertain.

3, try not to use pictures and scripts instead.

4, compatible with mobile side.

Writing HTML

<p class = "semicircle" ></p>

　

Think of one, use height:100%,

body{       margin:0;       width:100%;       Background:lightblue;   }   . semicircle {       width:100%;       height:100%;       border-top:5px solid #fff;       border-radius:100%;   }

There is a problem, and the percentage of height is calculated based on the parent container, not the current container, and does not meet our needs at all. The effect is as follows:

The height percentage of the parent container body is associated with the height of its child container, even if the body height is set to 100%, the parent container cannot be "fully stretched" because the actual height of the child container, semicircle, is 5 of the boundary. Therefore, you cannot specify a percentage of a container by setting the height of the parent container as a percent.

Think two, set padding-top or Padding-bottom to 100%
The percentage is calculated with respect to the width of the generated box ' s containing block [...] (source:w3.org, emphasis mine)

The calculation of the percent width is related to the width of the containing block of the generated box. The percentage of Padding-top, Padding-bottom, is calculated based on the width of the parent container, not the height. Other Scale Realization Table

aspect ratio	Padding-bottom Value
16:9	56.25%
4:3	75%
3:2	66.66%
8:5	62.5%

body{       margin:0;       width:100%;       Background:lightblue;   }   . semicircle {       width:100%;       height:0;       padding-bottom:100%;       border-top:5px solid #fff;       border-radius:100%;   }

Thinking three, using the VW unit
Using the VW unit to set the element height and width, the size of the VM is set by the width of the viewport, so you can keep the container displayed at a certain scale by this method. A unit of VW equals 1% viewport width, or 100vw equals 100%viewport width.

body{       margin:0;       width:100%;       Background:lightblue;   }   . semicircle {        width:100vw;         HEIGHT:100VW;       border-top:5px solid #fff;       border-radius:100%;   }

Table

by

aspect ratio	Multiply width
1:1	1
1:3	3
4:3	0.75
16:9	0.5625

Thinking four, using pseudo-elements and inline-block layouts

body {       width:100%;       font-size:0;       Text-align:center;       Background:lightblue;   }   . semicircle {       border-top:5px solid #fff;       border-radius:100%;   }   . Semicircle:before {       content: "";       Display:inline-block;       padding-bottom:100%;   }

Although the code is a bit complex, it is flexible and can achieve more similar effects.

When the requirement is changed to achieve a semicircle that spans the width of the screen 80%, we only need to add the attribute width:80% to the. semicircle and, by the way, the container is centered.

The principle of this method is clear:

Reference thinking one, cannot extend the outer container height through the height 100%, then can through the pseudo-element, inserts a height and the width consistent element, the container opens up to 1:1 height the container. Note that this method is semi-circular and requires a container with a width height of 1:1, which is twice times the space occupied by the above method.

Setting: Before element boundary, parsing principle:

Think five, use pictures, compatible with low-grade mobile devices.

Semicircler img {     width:100%;     Background-repeat:no-repeat;     background-size:100% 100%;     Background-image:url (.. /img/autoresized-picture.jpg);   }

Using scripts, CSS is more concise and clear, and the goal is clearer.

p.style.height=p.offsetwidth+ "px";

For implementing a 2*2 square grid

*------Main code-------*/body {width:100%;             margin:0;           Text-align:center;             } p{Display:inline-block;             width:50%;             Background:lightblue;             font-size:12px;             position:relative;           Vertical-align:middle;               } p:before {content: "";               Display:inline-block;               padding-bottom:100%;           Vertical-align:middle;           }/*------other code-------*/P:nth-child (2), P:nth-child (3) {background:pink;               } span {display:inline-block;               Vertical-align:middle;               Font-size:6em;           Color: #fff; }