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

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

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.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e38236-4c82d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e38236-4c82d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?