在微信小程序中是设置宽高百分比

一个简单的例子

  布局文件:

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

  样式文件:

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

  最终的效果去不是全屏:

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

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

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

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

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

  效果是不是出来啦

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

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

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

  对于图片也是一样的

  只写百分比

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

  效果可想而知

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

  现在加上position

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

  最终效果:

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

转载请注明出处:http://www.downza.cn/edu/38827.html

猜你喜欢

转载自blog.csdn.net/qq_28202661/article/details/81039217