1. 酷牛教程首页
  2. 软件教程

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

酷牛 • • 软件教程

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

布局文件：

在微信小程序中是如何设置宽高百分比的呢？

样式文件：

在微信小程序中是如何设置宽高百分比的呢？

最终的效果去不是全屏：

在微信小程序中是如何设置宽高百分比的呢？

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

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

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

在微信小程序中是如何设置宽高百分比的呢？

效果是不是出来啦

在微信小程序中是如何设置宽高百分比的呢？

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

在微信小程序中是如何设置宽高百分比的呢？

对于图片也是一样的

只写百分比

在微信小程序中是如何设置宽高百分比的呢？

效果可想而知

在微信小程序中是如何设置宽高百分比的呢？

现在加上position

在微信小程序中是如何设置宽高百分比的呢？

最终效果：

在微信小程序中是如何设置宽高百分比的呢？

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

本文来自投稿，不代表酷牛教程立场，如若转载，请注明出处：https://www.xukn.com/97398.html

赞 (0)
0

关于作者

酷牛的头像

酷牛

139.0K 文章
0 粉丝
这个人很懒，什么都没有留下～
上一篇 2025-09-05 10:09
下一篇 2025-09-05 10:43

相关推荐