750rpx 不能适配所有屏幕,只有 375 宽度的屏幕适配

小程序 文章 2021-12-13 16:00 31 0 全屏看文

750rpx 不能适配所有屏幕,只有 375 宽度的屏幕适配750rpx can’t fit all screens, only 375 width screen fits

750rpx 不能适配所有屏幕,只有 375 宽度的屏幕适配
框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信安卓客户端 7.0.20 2.19.3

这图是我在 375 的设备下开发的,看起来挺正常,上面哪些省份简称用的是 flex 布局,然后 x 使用的是固定定位,flex 内容两边留 30rpx 的宽度,绝对定位定位 30rpx 的距离,成立。

一旦换成非 375 的设备显示就出现了这种问题了,明显我这两边留空不一致,很显然,屏幕全宽 750rpx 并不适配,同时我也使用真机测试了一下,使用的是小米10,结果显示也为上面这种,并不对齐。

Framework type problem type terminal type wechat version basic library version applet bug wechat Android client 7.0 20 2.19. 3 this figure is developed by me under the 375 device. It looks quite normal. Which provinces above use the flex layout for short, and then x use the fixed positioning. The width of 30rpx is reserved on both sides of the flex content, and the absolute positioning distance of 30rpx is established. This problem occurs once the display is changed to a non-375 device. Obviously, the gaps on both sides are inconsistent. Obviously, the full width of the screen 750rpx does not fit. At the same time, I also tested it with a real machine. I used Xiaomi 10, and the result is the same as the above, which is not aligned.

回答:

武曲心:

60+10*x+9*y=750,x是字宽,y是间距,设置box-sizing:border-box,y取10,x就是60,这么算写死也是可以的

ㅤ:

flex没用好

微喵网络:

上代码片段

-EOF-