果玩软件园：为用户提供海量热门软件、游戏等手机资源下载服务！

装机必备热门标签玩游戏装软件 BT游戏 H5游戏看教程专题游戏盒子手机版

所在位置：首页 > 资讯教程 > 软件教程 > > 详情

怎么在微信小程序设置宽高百分比？

文章来源：网络作者：痴货i发布时间：2026-06-07 14:18:40

GM盒子(高返利版)

GM手游福利平台,免费送首充,上线送VIP,免费领元宝和代金券。

立即下载精品合集

Ready

小编今天给大家带来的是怎么在微信小程序设置宽高百分比?下面就和小编一起来学习一下吧，希望能够帮助到大家。

布局文件：

怎么在微信小程序设置宽高百分比？

样式文件：

怎么在微信小程序设置宽高百分比？

最终的效果去不是全屏：

怎么在微信小程序设置宽高百分比？

这是为什么呢，首先要知道设置百分比是什么意思，既然是百分比，那一定要有一个参照物，那就是它的父元素

在例子中，是对根元素(类似html中的body)设置百分比，所以它的根元素是page

但page没有设置高度、宽度呀，所以这是后设置百分比就属于失效的，想让它全屏那就直接设置父元素的宽高

怎么在微信小程序设置宽高百分比？

效果是不是出来啦

怎么在微信小程序设置宽高百分比？

或者直接在container里写上position:absolute也会有一样的效果，因为absolute是根据已定位的父元素设置位置的，还省了特意写一个page

怎么在微信小程序设置宽高百分比？

对于图片也是一样的

只写百分比

怎么在微信小程序设置宽高百分比？

效果可想而知

怎么在微信小程序设置宽高百分比？

现在加上position

怎么在微信小程序设置宽高百分比？

最终效果：

怎么在微信小程序设置宽高百分比？

以上就是怎么在微信小程序设置宽高百分比的全部内容了，大家都学会了吗?

End

复制本文链接资讯文章为果玩软件园所有，未经允许不得转载。

上一篇：如何在WPS中为表格快速填充序号？

下一篇：如何在酷狗音乐中开直播？

热门游戏MORE＋

相关资讯MORE＋

最新录入

热门资讯

新游新品榜

手机游戏: 休闲益智; 赛车竞速; 棋牌桌游; 角色扮演; 动作射击; 体育竞技; 经营养成; 策略塔防; 冒险解谜; 音乐游戏; 手游辅助; H5游戏; BT游戏

手机软件: 社交聊天; 系统工具; 时尚购物; 旅游出行; 影音播放; 生活实用; 办公学习; 资讯阅读; 拍摄美化; 游戏辅助; 健康医疗; 地图导航; 小说漫画; 安全防护; 育儿亲子

手游下载: 跑腿掌柜; 铸兵之王; 大武当之剑; 侍魂-胧月传说（1折免...; 上古纷争（0.1折免费版...; 大战英雄（0.1折免费领...; 旅行骑士（0.05日送1....; 魔魔打勇士（1折免费版...; 仙剑奇侠传五（1折送1...; 啪啪三国（1折免费版）

装机软件: gdgdgdg; dgdgdgdgg; 爱奇艺电脑版; Steam下载管家 2026最...; 360游戏大厅; GoLink加速器; 3DM驱动大师; 夸克; 豆包电脑版; 360C盘扩容大师

精选专题: 手机游戏专题; 手机软件专题; 电脑软件专题; 电脑游戏专题

游戏排行榜: 手游排行榜; 软件排行榜; BT排行榜; 电脑软件排行榜; 电脑游戏排行榜