小程序如何实现全机型布局适配



  • 布局出来后,切换设备发现部分地方无法适配,如何处理?



  • 按照如下步骤操作

    字体类、图标类、按钮类尺寸修改

    这些元素单位建议使用 rpx ,rpx 全称 responsive pixel 可以根据屏幕宽度进行自适应

    1da4e10a-116d-4f73-92d9-b25eeba02c48-image.png

    全屏、通栏类的元素和图片

    这一类别,宽度适合用vw 和 百分比,这样能保证在一些宽屏的设备上能保证达到全屏铺满的效果

    8d330609-2d1f-435a-8a64-175fb558c722-image.png

    特殊尺寸,有比例约束的元素和图片

    这一类的元素对尺寸要求比较高,不光需要保证宽度,还得保证高度,高度或宽度尺寸不对就会影响整体布局,这一类元素建议使用vw来限定宽高

    47a30a8f-a7c5-4990-bad2-29821745943f-image.png


Log in to reply