The width of rem is self-adaptive, so how to solve the problem of high adaptability of different devices?

Kotlin
IOS
VB.Net
SQL
Node.js
Swift
Ruby
Go
Oracle
Git
Laravel
Mongodb
Asp.Net
More...

problem description

make a Wechat general account h5 page, using rem layout, later found that rem is only adaptive width, different device height can not adapt, resulting in the page layout is very ugly, what is a good solution?

specific questions

Design draft picture, iphone6375x667

iPhone6

iPhoneXiphoneXiphone6iphoneX375x812iPhone4

expect results

is there a better solution to this rem layout for high adaptation? Thank you

Iphone html5 html javascript

Jul.30,2021

set the width but not the height. My space for the calculation of rem is relatively accurate. If not, let's use the mobile layout in three steps.

Previous: Can setTimeout execute more than one?

Next: Return false cannot prevent onclick from jumping after binding an event to it in JavaScript

False
Django, Why does the system automatically generate an empty session? every time the request is made?
Use python to convert dict1 to dict2, in the example. I tried for a long time but couldn't find a solution.
How to self-start the php-fpm service when building a LNMP environment with docker?
Can an array in react state be bound to a dom state using an element in the array?
Wechat browser version 6.6.5 cannot prevent the springback of pull-up and drop-down to the top under ios system.
In express+hbs, how do you define the routed data as a variable on the page?
How to use symbol reference of Iconfont in dva
How to elegantly add data to JSON objects?
Using node to build video streaming server
The proportional width of the echarts graph is inconsistent.
React uses axios to call the background data. After success, how to jump to the page based on the returned value?
I don't understand what a linux command means. Please explain it.
Vue introduces multiple components in vue-router by nesting named views, and does not refresh the same reference in other pages.
Running nodejs reports fewer errors ")"

The problem of repeated matching on the activeClassName home page of react-router
The problem of Golang struct, people who understand it are invited.
JS searches for keywords and displays them.
Vue CLI 3 can not be installed, has been prompted that there is a problem with protobufjs, how to solve it?
React project, click the browser back forward, the route is switched, but the navigation bar is not switched, how to deal with this?