屏幕适配器的作用是兼容不同型号的手机,进行适配,下面我用的是单独写个页面进行实现。
首先我们看到的是wxml页面:
<view class="content">
<view class="popup">
<image class="top" src="{{cdn + '/top.png'}}"></image>
<image class="title1" src="{{cdn + '/title1.png'}}"></image>
<image class="content" src="{{cdn + '/content.png'}}"></image>
<image class="logo" src="{{cdn + '/logo.png'}}"></image>
<image class="title2" src="{{cdn + '/title2.png'}}"></image>
<image class="title3" src="{{cdn + '/title3.png'}}"></image>
<image class="grass" src="{{cdn + '/grass.png'}}"></image>
<image class="title4" src="{{cdn + '/title4.png'}}"></image>
</view>
</view>
json页面:
{
"usingComponents": {},
"navigationBarTitleText": "大小屏幕兼容"
}
样式页面:
.content { width: 100%; height: 100%; position: absolute !important; left: 0; top: 0; }
.content .popup { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #aefcef; overflow: hidden; }
.content .popup .top { position: absolute; width: 750rpx; height: 341rpx; left: 0rpx; top: 0rpx; }
.content .popup .title1 { position: absolute; width: 355rpx; height: 59rpx; left: 191rpx; top: 119rpx; }
.content .popup .content { position: absolute; width: 750rpx; height: 1220rpx; left: 0rpx; top: 166rpx; }
.content .popup .logo { position: absolute; width: 25rpx; height: 246rpx; left: 59rpx; bottom: 293rpx; }
.content .popup .title2 { position: absolute; width: 545rpx; height: 334rpx; left: 148rpx; top: 379rpx; }
.content .popup .title3 { position: absolute; width: 288rpx; height: 89rpx; left: 236rpx; bottom: 304rpx; }
.content .popup .grass { position: absolute; width: 750rpx; height: 390rpx; left: 0rpx; bottom: 0rpx; }
.content .popup .but1 { position: absolute; width: 262rpx; height: 125rpx; left: 245rpx; bottom: 111rpx; }
.content .popup .title4 { position: absolute; width: 259rpx; height: 44rpx; left: 13rpx; bottom: 50rpx; }
/* ------- 16:9(标准屏安卓手机、iphone5/6/7/8) -------*/
@media screen and (width: 360px) and (min-height: 640px) and (max-height: 659px), screen and (width: 393px) and (min-height: 695px) and (max-height: 729px), screen and (width: 412px) and (min-height: 732px) and (max-height: 749px), screen and (width: 320px), screen and (width: 375px) and (min-height: 600px) and (max-height: 667px), screen and (width: 414px) and (min-height: 670px) and (max-height: 736px) {
.content .popup .top { top: -120rpx; }
.content .popup .title1 { top: 30rpx; }
.content .popup .content { top: 45rpx; }
.content .popup .logo { bottom: 230rpx; transform: scale(0.8); }
.content .popup .title2 { top: 260rpx; }
.content .popup .title3 { bottom: 180rpx; }
.content .popup .grass { bottom: -60rpx; }
.content .popup .but1 { bottom: 50rpx; }
.content .popup .title4 { bottom: 10rpx; }
}
/*-------- 15:9(标准屏+虚拟系统按键安卓手机(华为P9))-------*/
@media screen and (width: 360px) and (min-height: 520px) and (max-height: 639px) {
.content .popup .top { top: -120rpx; }
.content .popup .title1 { top: 30rpx; }
.content .popup .content { bottom: 45rpx; }
.content .popup .logo { bottom: 230rpx; transform: scale(0.8); }
.content .popup .title2 { bottom: 250rpx; }
.content .popup .title3 { bottom: 180rpx; }
.content .popup .grass { bottom: -60rpx; }
.content .popup .title4 { bottom: 10rpx; }
}
js页面:
Page({
data: {
cdn: 'https://chaozhenrihuajianhang.oss-cn-hangzhou.aliyuncs.com/test/xiaochengxu/screenAdaptation'
},
})