Overview
I have written a font-size adaptation plan for mobile terminals before , but in the process of practice, I still found that the thinking at that time was too limited and the field of vision was too narrow, so now I will add and update it and record it for reference in future development. I believe Useful for others too.
My last blog post mainly had 2 misunderstandings , which I will write down one by one below.
This blog post refers to the mobile terminal adaptation scheme (below) .
Adaptation scheme
There are various adaptation schemes:
- Percentage layout : fixed height, adaptive width. It is a fixed height and a percentage of width. As you can imagine, for different screens, everything is stretched horizontally, resulting in a very unsightly look.
- px layout : fixed width, viewport scaling. It is to use all px, and then use js to control the scaling ratio of the initial-scale. In this way, on different screens, the page will be scaled proportionally as a whole.
- rem layout : rem is used as a unit of measure, and font-size is changed.
It should be noted that if only the entire page is zoomed in and out, the effects of method 1 and method 2 are the same ! ! !
Adaptation purpose
As I said before, the purpose of our adaptation is: for different screens, the page simply needs to be zoomed in or out. For this purpose, the above methods 2 and 3 can achieve the effect.
However, when humans invented wider devices, they didn't just want to see wider fonts or larger pages, but to see more beautiful layout content . And this is the essence of responsiveness: showing different content to others according to different screen sizes !
So from this point of view, method 2 is far from enough, so we need method 3, which has 2 advantages:
- You can combine rem and px to achieve the same size of some content!
- You can use rem responsive to display different layouts for different screen sizes!
At present, I only understand the level of method 3. Method 3 has a limitation, that is, it cannot be well adapted to dpr, so if there is a better adaptation scheme compatible with dpr in the future, I will write it down.