Suitable for all sizes of equipment

Sometimes we have the need to make content occupy a single screen, and adapt to a variety of sizes of equipment. Let's not talk about it. This will lead to unsatisfactory display on some devices, and talk directly about how to achieve it.

We'll be the first to think of the possibility that the width, height, and margin value (margin,padding) of all block-level elements in the page are used as percentages.
In the horizontal direction, the width, the horizontal direction of the spacing value if the value is a percentage, and its value is calculated relative to the width of its parent element, you can achieve a horizontal orientation to fit different size devices.
In the vertical direction, if the height value is a percentage, its value is calculated relative to the height of the parent element. But if the vertical direction of the spacing value is a percentage, its value is relative to the parent element width (rather than height) to calculate, hehe (helpless ~ ~ ~).

Therefore, the horizontal direction we can use a percentage of the scheme to do the adaptation. Other scenarios are required for vertical orientation.

Can we use CSS3 's Media Queries? Can't do that. Although Media Queries supports querying for device heights, it is not possible to enumerate the height of all devices and write a CSS for each device of varying heights. If you only need to be compatible with several high-level devices, consider this scenario.

Here are a few solutions.

Using JS to achieve

The principle is to set the height with the Data-style-height property on the element, whose value is the number of copies in the height of the parent element. When the page is initialized, JS assigns a value to the height of the parent element, based on the value, the total number of copies of the parent element's height. Such as

<p>  <p id= "A" data-style-height= "1" ></p>  <p id= "B" data-style-height= "2" ></p ></p>

In the above code, the total number of copies of the parent element's height is 3,a 1, and B is 2. Assuming that the height of the parent element is 100px, then the height of a is (1 / 3 * 100)px , B is the height (2 / 3 * 100)px .

Similarly, set the spacing with these properties: Data-style-margin-top, Data-style-margin-bottom, Data-style-padding-top, Data-style-padding-bottom. When the page is initialized, JS assigns values to the corresponding spacing of the elements based on the attribute values.

Specific implementation code see here.

Implemented with Flex

The principle and the use of JS to achieve basic consistency. Using flex to implement a flex-grow flex element with a value greater than 0 automatically becomes larger when the parent space is large, instead of the JS calculation.

The specific principle is to set the height on the element with the Data-style-height property, whose parent element sets the style display:flex;flex-direction: column; . When the page is initialized, JS sets the element according to the value flex-grow:属性值 . The spacing is implemented with elements with a data-style-height attribute and an empty element content.

Specific implementation code see here.

Use picture to realize

If the content does not require interaction, the entire page can be made into a single picture. Of course, this is done later maintenance will compare pit father.

Html:

Css:

html,body{  height:100%;}. fullpage{  width:100%;  height:100%;}