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

人人都在发奋

已于 2022-09-29 20:53:59 修改

阅读量2.3w

点赞数 7

分类专栏： # 微信小程序文章标签： uni-app 小程序微信小程序

于 2021-12-07 10:27:24 首次发布

本文链接：https://blog.csdn.net/qq991658923/article/details/121734006

版权

微信小程序专栏收录该内容

10 篇文章

订阅专栏

这篇博客探讨了如何实现手机页面的高度自适应设计，确保在不同尺寸的设备上都能良好显示。通过设置页面宽度和高度为100%，背景图容器宽度100%及最小高度100%，并利用uni-app获取屏幕高度，实现页面高度随屏幕大小变化。此外，还展示了具体的代码实现，包括Vue组件和样式设置，以达到背景图的全屏填充效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设计原理

由于不同手机的尺寸是不一样的，所以要做到高度自适应
设置页面的宽度与高度为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>

设置页面宽度与高度

<style>
page {
	width: 100%;
	height: 100%;
}
</style>

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

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