代码改造：巧用vw和vh让代码适配不同屏幕大小

为了将代码转换为使用vw和vh单位，我们需要在样式中添加相应的转换。首先，我们需要在CSS中定义一个变量，例如`--base-font-size`，然后使用这个变量来计算其他元素的宽度和高度。接下来，我们将使用`calc()`函数来根据屏幕尺寸动态调整元素的宽度和高度。 解析后的代码如下： ```html <template> <view v-if="boys===true" class="boys"> <view> <!-- 家长管控验证弹窗 --> <uni-popup ref="popupdelete"> <!-- 家长管控关闭弹窗 --> <view class="close-popul" @click="closepopul"> <image src="@/static/user/butdelete.png" mode=""></image> </view> <view class="confimdelete"> <view class="top">家长管控</view> <view class="popups-display"> <view class="text-title">需要家长验证，请依次点击</view> <view class="popups-show"> <view class="show"> <!-- 在这里添加内容 --> </view> </view> </view> </view> </uni-popup> </view> </view> </template> <style> :root { --base-font-size: 16px; /* 根据设计稿设置基准字体大小 */ } .boys { width: calc(100vw - 2 * var(--base-font-size)); /* 减去左右两侧的边距 */ height: calc(100vh - 2 * var(--base-font-size)); /* 减去上下两侧的边距 */ } .close-popul { width: calc(var(--base-font-size) * 2); /* 假设关闭按钮宽度为基准字体大小的两倍 */ height: calc(var(--base-font-size) * 2); /* 假设关闭按钮高度为基准字体大小的两倍 */ } /* 其他元素的样式也类似地使用calc()函数进行计算 */ </style> ``` 这里的`--base-font-size`变量的值应该根据设计稿进行调整。你可能需要根据实际情况调整其他元素的宽度和高度。 ######[AI写代码神器 | 623点数解答 | 2024-08-23 11:41:50]