Compared with PC-side web development, we can be fortunate that there are not so many browsers compatible with mobile-side web development, but the adaptation of various screen sizes comes with it. Personally, it takes more effort than PC-side web development. After using Tencent Youshi for software testing, the problem has been effectively solved.
Responsive layout
In short, the position of page elements changes with the size of the screen, which is usually positioned in percentages, and some space that can be "compressed" needs to be reserved in the design.
As shown in the figure above, it is actually equivalent to the page being pressed down.
Cover layout
Just like the cover property of background-size, maintain the aspect ratio of the page, take the smaller of the width or height to fill the screen, and the excess content will be hidden. This layout is suitable for designs where the main content is concentrated in the center and there is no important content at the edges.
As shown in the picture above, the first one is the original design draft, the second one hides a part of the left and right, and the third one hides a part of the top and bottom.
ContainLayout
Similarly, like the contain property of background-size, the aspect ratio of the page is maintained, and the larger of the width or height fills the screen, and the insufficient part will be filled with the background. Personally, this method is recommended, but the background needs to be a single color or a tileable background in design.
As shown in the figure above, the red frame is the original aspect ratio, which is scaled according to different screen sizes and filled with background.
Well, let's talk about the commonly used implementation methods.
style scaling
The easiest way to adapt is to use px as the unit for visual development, and then use transform:scale to globally scale the web page by calculating the aspect ratio between the screen and the web page.
However, there is a small problem with this method, that is, if there are animations in the webpage, the page performance will be slightly reduced after scaling, which is more obvious on low-end Android machines, and no performance problems have been found on iOS.
Rem scaling
Rem is a good thing, who knows who uses it, so I won't explain it here. The principle is the same as the above style scaling, but the visual development is carried out in units of Rem, and then the page is scaled by changing the front-size of html after calculation.
Regarding the development in Rem, it is currently more popular to use Font-size=62.5%, and then the method of 1rem=10px. If you have tried it, you can directly change it to px. It depends on your personal computing habits.