如何让这弹窗在各尺寸手机里面都自适应显示

Question

如何让这弹窗在各尺寸手机里面都自适应显示，请牛人来帮忙改改

主要image 是背景图 有的手机尺寸不一样 会大会小 之类的

<view>
            <u-popup v-model="show" mode="center" border-radius="14" close-icon-pos="top-right" closeable="true">
                <view style="display: flex;flex-direction: column;width: 100%;height: 100%;">
                    <image style="width: 360px;height: 360px; background-color: #eeeeee;" mode="scaleToFill"
                        src="../../static/vip.png" @error="imageError"></image>
                        <view style="text-align: center; line-height: 40px;position: absolute;right: 174px;
    top: 200px;">
                    <u-button  type="warning" size="medium" open-type='contact' session-from='weapp'>去充值</u-button>
                    <navigator style="line-height: 50px;font-size: 15px;" url="/pages/index/index2"
                        open-type="switchTab" hover-class="none">不了,再看看</navigator>
                        </view>
                </view>


            </u-popup>
        </view>

Answer 1

用的是uniapp吗？uniapp可以使用rpx做适配，rpx是个动态单位，会根据不同的屏幕像素分配不同的宽高，如果用ipone6机型作为开发时的屏幕像素，则 2rpx = 1px。
例如：
px写法: width: 100px;
rpx写法：width: 200rpx;