First of all, let’s talk about the reason for the visual deformation. Because you don’t scale proportionally, it will definitely be visually disharmonious. To confirm, whether the h5 page should be filled with space, or whether it is better to use the design width of 100%, just center the top and bottom, regardless of the white space at the top and bottom. Besides, for this kind of h5 page, for example, the carousel needs to be taken out separately and fixed at a relative position, such as top:50%; margin-top:*px. This way there will be no deformation at any height.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
First of all, let’s talk about the reason for the visual deformation. Because you don’t scale proportionally, it will definitely be visually disharmonious.
To confirm, whether the h5 page should be filled with space, or whether it is better to use the design width of 100%, just center the top and bottom, regardless of the white space at the top and bottom.
Besides, for this kind of h5 page, for example, the carousel needs to be taken out separately and fixed at a relative position, such as top:50%; margin-top:*px. This way there will be no deformation at any height.
Use @media to set different resolutions. It may not be a problem if some fonts are not distinguished. Just distinguish the size of the large circles
Image background processing method
background-size:cover;
background-position:center center;
img picture
position:absolutel;top:50%;left:50%;margin: negative number half the height of the image 0 0 negative number half the width of the image