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

刺骨的言语ヽ痛彻心扉 2023-10-11 16:43 20阅读 0赞

## 设计原理 ##

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

## 效果图 ##

![效果图][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lq65Lq66YO95Zyo5Y-R5aWL_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Lq65Lq66YO95Zyo5Y-R5aWL_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/d19022b4020f4b5599e9d6d63b76011f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq65Lq66YO95Zyo5Y-R5aWL,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

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

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

刺骨的言语ヽ痛彻心扉/ 2023年10月11日 16:43/ 0 赞/ 21 阅读

相关 div背景图自适应占满

css代码： background-image: url(../imgs/footerkuang.png); background-repeat: no-re

女爷i/ 2022年12月21日 04:54/ 0 赞/ 112 阅读

相关全屏自适应背景图

主要代码下： (function($) \{ $.fn.fullBg = function()\{ var bgImg = $(this); func

蔚落/ 2022年08月25日 12:58/ 0 赞/ 176 阅读

相关设置背景图片自动适应屏幕

先说一下我的配置：浏览器：chrome 使用CSS：bootstrap（这个可能会影响到我们css的设置，所以还是提一下）在设置背景图片的过程中，经常遇到背景图片不能

太过爱你忘了你带给我的痛/ 2022年06月17日 07:12/ 0 赞/ 183 阅读

相关自适应屏幕设置

参考[@media自适应屏幕][media] 1024\500 （8.9寸） 1024\768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ） 1

我就是我/ 2022年05月23日 10:49/ 0 赞/ 259 阅读

相关 NGUI屏幕自适应

屏幕自适应 NGUI可以比较方便的实现屏幕自适应，但是它的官方教程里面针对这个问题没有详细的教程，所以可能在实现的时候会走比较多的弯路。以下是我在开发过程中找到的一个比较

冷不防/ 2022年04月11日 10:45/ 0 赞/ 232 阅读

相关 VMware屏幕自适应

下载VMware Tool ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

左手的ㄟ右手/ 2022年02月21日 15:58/ 0 赞/ 257 阅读

相关 css背景图自适应

在开发时，修改了d2admin的登录页面。使用了背景图片，但是ui给的图过于大（可能是我电脑屏幕小哈）无法完整的显示到页面上，所以修改了代码，可以完整显示背景图。代码如下：

迈不过友情╰/ 2022年01月06日 14:09/ 0 赞/ 347 阅读

相关 CSS 让背景图自适应width

在div或者其他容器的style添加 background-size: cover !important; <table style="height:333px;

Love The Way You Lie/ 2021年09月25日 04:50/ 0 赞/ 330 阅读

相关 unity屏幕自适应

下面以竖屏游戏为例，步骤如下： 1.新建工程 2.选择发布平台。File--BuildSettings...--PlatForm里面选择平台--Switch Platf

喜欢ヅ旅行/ 2021年09月16日 05:42/ 0 赞/ 385 阅读