Implementation that adapts to devices of various sizes

Sometimes we have the need to make the content occupy exactly one screen and adapt to devices of various sizes. Let’s not talk about how this will lead to unsatisfactory display on some devices, but let’s talk directly about how to implement it.

The first thing we may think of is that the width, height, and margin values ​​(margin,padding) of all block-level elements on the page are all in percentages. chant.
In the horizontal direction, width, and horizontal spacing value, if it is a percentage value, its value is calculated relative to the width of its parent element, which can adapt to devices of different sizes in the horizontal direction.
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 spacing value is a percentage, its value is calculated relative to the width (not the height) of the parent element, haha ​​(helpless~~~).

Therefore, we can use the percentage scheme for adaptation in the horizontal direction. Vertical orientation requires other solutions.

Can we use CSS3 Media Queries? Can't do it. Although Media Queries supports queries on device heights, it is impossible for us to enumerate the heights of all devices and write a set of CSS for each device with different heights. If you only need to be compatible with a few height devices, you can consider this solution.

Here are some solutions.

Use JS to implement

The principle is to set the height on the element using data-style-height attribute, Its value is the fraction of the height of the parent element. When the page is initialized, JS will assign a value to the height of the element based on this value, the height of the parent element, and the total number of heights of the parent element. For example,

<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 parts of the height of the parent element is 3, the height of a accounts for 1 part, and the height of b accounts for 2 parts. Assume that the height of the parent element is 100px, then the height of a is (1 / 3 * 100)px, and the height of b is (2 / 3 * 100)px.

Similarly, use these attributes to set the spacing: data-style-margin-top, data-style-margin-bottom, data-style- padding-top, data-style-padding-bottom. When the page is initialized, JS will assign the corresponding spacing to the element based on the attribute value.

See here for the specific implementation code.

Using flex to implement

The principle is basically the same as using JS. The implementation using flex just uses the feature that flex elements with a value of flex-grow greater than 0 will automatically grow larger when the parent space is large, instead of JS calculation.

The specific principle is to set the height on the element using the data-style-height attribute, and its parent element to set the style<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:flex;flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>: column;. When the page is initialized, JS will set the flex-grow: attribute value to the element based on this value. Spacing is implemented using elements with the data-style-height attribute and empty content.

See here for the specific implementation code.

Use picturesImplementation

If the content does not require interaction, the entire page can be made into one picture. Of course, post-maintenance will be a bit tricky if you do this.

HTML:

<img class="fullpage" src="...">

CSS:

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

---

The above is the detailed content of Implementation that adapts to devices of various sizes. For more information, please follow other related articles on the PHP Chinese website!