时间:2021-05-18
按比例适应布局
大家有没有过一个烦恼,就是让某个view的高度或者宽度扩大点,而且是要按比例适应不同的手机,遇到这类问题应该怎么办?
下面就为大家讲解怎么做一个能够自动适应不同手机的布局
1、像素单位 rpx
首先,我们来说说像素单位rpx,rpx是官方为小程序出的尺寸单位rpx(responsive pixel),它可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。所以平常我们应该尽量使用rpx来代替px
2、容器view的宽高使用百分百的方式
其次,我们来说说容器view的宽高应该尽量使用百分比的方式来写,下面我们来看看以下的示例:
首先来张显示图
注意:这里的满屏显示设置高度100%,会有什么都不显示的情况,下面会讲解到
下面,你们要的重点来了,上代码:
代码
wxml
<view class="view_contain"> <view class="view_1"> </view> <view class="view_2"> </view> <view class="view_3"> </view></view>wxss
page{ width: 100%; height: 100%;}.view_contain { width: 100%; height: 100%;}.view_1 { width: 100%; height: 20%; background: #b1d0f1;}.view_2 { width: 100%; height: 30%; background: #c1f3aa;}.view_3 { width: 100%; height: 50%; background: #f1d0b1;}到此这篇关于微信小程序整个页面的自动适应布局的实现的文章就介绍到这了,更多相关小程序自动适应布局内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序之页面跳转和参数传递的实现前言:在微信小程序里面的跳转其实和html里的超链接a差不多,我们实现跳转可以通过标签实现,也可以通过js实现,下面一一演示
微信小程序页面传参微信小程序的传参,页面跳转,页面之间传递参数在开发APP应用的时候会经常用到这样的功能,这里就用微信小程序来实现,大家可以看下如何实现,如有错
微信小程序页面布局方式采用的是Flex布局。Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。Flex布局提供了元
一、小程序未来趋势预测1.小程序向平板、PC端布局,腾讯系产品入口全量开放小程序将很快适应平板电脑,并将来能够适应PC。小程序项不再限于微信,但会逐渐蔓延到其他
现在微信小程序想必对于大家来说已经不陌生了,微信小程序自带流量,简单操作,那么如何提升微信小程序的引流效果呢? 1、页面的设计风格与丰富程度 微信小程序