uni-app设置背景图自适应手机屏幕尺寸

设计原理

• 由于不同手机的尺寸是不一样的，所以要做到高度自适应
• 设置页面的宽度与高度为100%
• 设置背景图容器的宽度为100%，高度或者最小高度为100%

实现方式

最外层容器高度自适应

<script>
export default {
	data() {
		return {
			screenHeight: 0
		}
	},
	onLoad() {
		this.screenHeight = uni.getSystemInfoSync().windowHeight
	}
}
</script>

<template>
	<view class="container" :style="{ height: screenHeight }">view>
template>

设置页面宽度与高度

设置背景图容器宽度与高度

.container {
	background: url('') no-repeat center center;
	background-size: 100% 100%;
	width: 100%;
	min-height: 100%;
	background-repeat: no-repeat;
}

效果图