微信小程序开发学习笔记2

微信小程序开发学习笔记2

小程序开发笔记2

小程序自适应尺寸单位

进入index.wxml文件（相当于html文件）

<view class="box">hello world</view>

进入index.wxss文件（相当于css文件）定义样式

.box {  
width: 100px;  
height: 100px;  
background: red;
}

运行效果

应用的是px单位，当屏幕尺寸/分辨率发生改变的时候，大小不变，但是应该要自适应变化。
如何自适应变化呢？
将 px 改成 rpx 。
建议在Iphone6下调试，此时1rpx=0.5px，便于换算。

如何使用flex弹性布局

在index.wxml中写架构
目标效果要实现下面这个部分：

可以通过如下代码实现：

1. 在index.wxml中
   
2. 在index.wxss中
   （1）对sort_box定义：
   
   效果为
   
   （2）对sort_box里面的icon按钮定义：

.sort_box .item .icon{  
width: 100rpx;  
height: 100rpx;  
line-height: 100rpx;  
background-color: #4a95dc;  
color: #fff;  
text-align: center;  
border-radius: 50%;
}

效果为：

把下面的词居中：

.sort_box .item{  
text-align: center;
}

得到效果如下：

接下来实现四个圆形等间距自由横向分布：

效果如下：

在微信小程序编写界面里，找到Wxml，然后就可以查看预览界面里面的各个元素的大小。