uni-app - 实现全屏自适应且不变形背景大图，设置一张图片占满全屏（根据手机或电脑尺寸自动拉伸背景图像），用于页面是一张平铺的大图做背景的情况，全端兼容

前言

网上的很多文章的教程都有一定问题，要么不会自动适应手机尺寸，要么写一堆 js 判断手机宽高，兼容性极差且代码臃肿。

在 uni-app 项目中，经常遇到 H5 活动页、营销页、图片背景元素点缀等需求，

需要一张背景大图来做平铺，并且要适应各种机型（不同屏幕尺寸），

本文从 0-1 快速实现该功能，您只需要复制粘贴即可，

如下图所示，在任何机型与屏幕宽高下，依然能 “丝滑” 的拉伸兼容：

兼容 uni-app 全端，支持【纯】微信小程序项目使用

解决方案

推荐使用平台一键复制功能，避免漏选。

您随便找个新页面，复制运行起来即可。

<!-- 正常平铺的H5页面，背景需要去掉顶部标题栏，详见文章最底部教程-->

uni-app - 实现全屏自适应且不变形背景大图，设置一张图片占满全屏（根据手机或电脑尺寸自动拉伸背景图像），用于页面是一张平铺的大图做背景的情况，全端兼容相关推荐

Dialog 宽度占满全屏
转载自:https://blog.csdn.net/sydmobile/article/details/83588708 Dialog 宽度占据全屏关于如何自定义设置 Dialog 的大小,以及如何 ...
【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题
. 参考界面 : 携程app首页的广告栏, 使用ViewPager实现自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...
有道云笔记设置界面占满全屏（右侧）
有道云笔记设置界面占满全屏(右侧) 其实是叫视角,但是一般查询的时候不会查这个词语吧总之一开始是阅读视角,界面窄一点普通视角会宽一点吧
如何div高度占满全屏无滚动条
如何div高度占满全屏无滚动条 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
html css图片平铺整个页面,css 样式图片平铺整个界面
比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改的. 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y, ...
Android recycleview瀑布流中间穿插一行占满一屏
背景: 我们在开发过程中,经常会混合不同的style view展示,对不同的内容有着不同的要求.列表是提供容易的view.在Android中,recycleview支持多样化的线上,但是我们会发现,布 ...
vue项目高度未占满全屏，可以给app.vue页面设置样式，来让高度撑开全屏
height: 100vh;
黑马商城项目级联选择占满全屏解决方案
在全局样式的css中添加一下面样式即可 .el-scrollbar__wrap {height: 300px !important }
echarts 图表不能占满全屏
第一步: // 获取放echarts的dom var mySize = document.getElementById('main') 第二步: // 给宽度 -270 是取合适自己盒子的值 mySi ...

uni-app - 实现全屏自适应且不变形背景大图，设置一张图片占满全屏（根据手机或电脑尺寸自动拉伸背景图像），用于页面是一张平铺的大图做背景的情况，全端兼容

前言

解决方案

uni-app - 实现全屏自适应且不变形背景大图，设置一张图片占满全屏（根据手机或电脑尺寸自动拉伸背景图像），用于页面是一张平铺的大图做背景的情况，全端兼容相关推荐

最新文章

热门文章