设计原理

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

效果图

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

从0开始html前端页面开发_CSS实现设置背景图自适应屏幕大小
只需要在css样式里对BODY元素添加css样式即可 html代码如下 <STYLE TYPE="text/css"> BODY {background-image: ...
uni-app 设置背景图在手机中无效
如下写法在微信开发者工具中显示正常,但在真机调试下,手机端背景图并未显示 <template> <view :style="{background:'url('+image ...
android如何设置自适应大小的背景图片,Android – 设置壁纸以适应手机屏幕尺寸...
作者的回答在评论中, 但是没有人看到评论,我在这里复制: Bitmap bmap2 = BitmapFactory.decodeStream(getResources().openRawResourc ...
div自适应背景图的尺寸：设置背景图的方式；img作为div元素的方式
目录零.问题描述和基本情况介绍案例: 问题及疑问: 一.background-size:cover;和background-size:100%;的区别: 1.background-size:100 ...
h5实现网页内容跟随窗口大小移动_HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结...
这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值,需要的朋友可以参考下 1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标 ...
设置背景图时防止图片拉伸的解决方法
在设置背景图时,如果图片不够大会被拉伸,使图片失真,如果图片太大会对view控件的显示造成影响. 如果只是在ImageView中设置图片的话,在程式中可以利用setScaleType进行动态设定,在x ...
android webview加载html图片自适应手机屏幕大小点击查看大图
我们在开发中,显示信息详情时,一般后台会给出html文本,在android端一般采用webview控件来展示,但是后台给出的html文本一般是给电脑端用的,没有自适配手机,导致手机端图片显示过大,需要 ...
安卓 webview加载html图片自适应手机屏幕大小和点击查看大图
我们在开发中,显示信息详情时,一般后台会给出html文本,在android端一般采用webview控件来展示,但是后台给出的html文本一般是给电脑端用的,没有自适配手机,导致手机端图片显示过大,需要 ...
Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
让Webview加载的页面居中显示有我知道的俩种方法第一种: [java] WebSettings settings = webView.getSettings(); settings.setL ...
仿比心源码，uniApp自适应手机屏幕高度
仿比心源码,uniApp自适应手机屏幕高度 // 获取屏幕高度用res.screenHeight let _this = this; //uni.getSystemInfoSync异步接口uni.ge ...

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

设计原理

实现方式

最外层容器高度自适应

设置页面宽度与高度

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

效果图

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

最新文章

热门文章