微信小程序开发笔记（三）flex布局和自适应单位rpx

约定不等于承诺〃 2022-03-22 07:54 458阅读 0赞

参考教材：《微信小程序开发入门与实践》 雷磊  
前置知识：JavaScript，CSS

### 什么是flex布局 ###

在上一篇博客里，笔者在hello.wxss 里使用了`display: flex;` 。什么是flex呢？  
![在这里插入图片描述][2019012709195760.png]  
flex布局是W3c组织在2009年提出的一个新的布局方案，其宗旨是让页面的布局样式更加简单，并且可以很好地支持`响应式布局`。这并不是小程序所独有的技术，它本身是CSS语法的一部分。只不过早期时候，主流的浏览器对flex布局的支持并不完善，造成了开发者并不知道与这种布局方式的存在或者使用非常少，我们还是习惯使用传统的position和float属性来布局。但传统的布局方式有它的缺陷 ，比如垂直居中就不是那么容易实现，flex布局可以很好的解决这些问题。现在，小程序能够非常好的支持flex布局，并且这也是官方推荐的布局方式。

### 响应式布局 ###

上面提到了`响应式布局` 这一个概念，这个概念是为解决移动互联网浏览而诞生的，主要为了解决同一个WEB页面在不同设备和环境中均能获得一致性用户体验的问题。在设计页面的时候，为了方便，我们通常只在某一种分辨率下预览我们的界面，比如上一篇博客里，笔者就选择了iPhone6作为模拟的机型预览小程序的页面。响应式布局的目标就是在其他移动设备（比如ipad，各种不同分辨率的安卓手机）访问该界面的时候，页面的整体布局不发生改变。我们之前设计hello页面用到的flex布局其实就是响应式布局，该页面在Nexus5和ipad pro上访问的时候，不会由于分辨率的不同而造成页面结构的改变。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70]  
![ipad pro][]

### flex布局的简单使用 ###

`display: flex` 主要作用在容器上，比如`view`组件就是一个容器。设置`display: flex`是使用flex布局的先决条件。  
然后我们来了解`轴`的概念。类似平面直角坐标系中有不同方向的两条轴（X轴和Y轴）一样，使用Flex布局的容器内也有两条隐形的轴，一条称为`主轴`，另一条称为`交叉轴`，两条  
轴也相互垂直。我们只需要通过`flex-direction`指定`主轴`的方向，另一方向的轴自动成为`交叉轴`。

flex-direction: column; 主轴垂直，方向自上而下，交叉轴为水平方向
      flex-direction: column-reverse;主轴垂直，方向自下而上，交叉轴为水平方向
      flex-direction: row;主轴水平，方向自左向右，交叉轴为垂直方向
      flex-direction: row-reverse;主轴垂直，方向自右向左，交叉轴为垂直方向

下面四张图中，红色的箭头代表的是主轴方向，容器内的元素在主轴方向上按顺序排列。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 4]  
另外，我们还用到了一个`align-items:center`属性，这个是设置容器元素在交叉轴上的位置，`center`代表在交叉轴上居中，当然还可以设置其他的值，不过这是css的知识了，读者自行尝试，在这里就不赘述了。  
最后，列出在wxml中的其他容器，如下：

<table> 
 <thead> 
  <tr> 
   <th>组件名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/component/view.html" rel="nofollow">view</a></td> 
   <td>视图容器</td> 
  </tr> 
  <tr> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html" rel="nofollow">scroll-view</a></td> 
   <td>可滚动视图容器</td> 
  </tr> 
  <tr> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html" rel="nofollow">swiper</a></td> 
   <td>滑块视图容器</td> 
  </tr> 
  <tr> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html" rel="nofollow">movable-view</a>/<a href="https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html#movable-area" rel="nofollow">movable-area</a></td> 
   <td>可移动的视图容器</td> 
  </tr> 
  <tr> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html" rel="nofollow">cover-view</a></td> 
   <td>覆盖在原生组件之上的文本视图</td> 
  </tr> 
  <tr> 
   <td><a href="https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html#cover-image" rel="nofollow">cover-image</a></td> 
   <td>覆盖在原生组件之上的图片视图</td> 
  </tr> 
 </tbody> 
</table>

### 自适应单位rpx ###

大家应该注意到了，在hello.wxss样式表里，绝大多数长度单位都设置的是`rpx`这个全新的单位。比如设置图片大小的时候。  
![在这里插入图片描述][20190128081615673.png]

要透彻的了解rpx这个单位，还需要对移动端的分辨率有一定的了解，比如物理分辨率px和逻辑分辨率pt等概念。简单的说，rpx将随着屏幕尺寸的变换而变换，但px不会。这里我们只需要记住如下的结论：  
**在iPhone6的宽度750个物理像素作为标准来做设计图，1物理像素=1rpx=0.5px**，  
比如在iPhone6宽度750物理像素下，要显示一张宽和高都是200像素\*200像素的图片，就要把图片的高度和宽度都设置为`200rpx`，或者`100px` ，这时候在iphone6上的显示的效果都是一样的，但是我们换到其他机型的时候，就会出现差异。因为rpx将随着屏幕尺寸的变换而变换，但px不会改变大小。  
下面做个尝试，在iPhone6尺寸下，将图片的单位改为px，图片的大小没有发生改变，然后把模拟器切换都ipad pro ，图片还是一样的大小（但是相对于整个页面来说，变小了），即px作为单位的时候，不会由于页面的变大，该改变大小。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 6]  
**`注意：只有在iPhone6尺寸下，1物理像素=1rpx=1px才成立`**,官方推荐使用iPhone6的尺寸标准来设计界面。

### rpx和px 之间的选择 ###

在进行移动开发的时候，我们经常要考虑不同分辨率下页面的显示情况。比如对于`margin` 属性或者`image`组件，很多时候，需要他们随着设备的尺寸不同动态的变化，以保持页面元素之间的分布可以保持`一定的比例关系`。  
但有时候，比如boder属性（设置边框的样式）,我们不需要它动态变化。如果随着页面的放大，边框的线条变得越来越宽，页面就不好看了。  
所以选择使用rpx还是px需要看实际情况，此外也需要读者自己去多多尝试

[2019012709195760.png]: /images/20220322/0ffafd5123ea4771afd6314497c698a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70]: /images/20220322/2e73bb71c90b4a5a8a6966f2c2315e68.png
[ipad pro]: /images/20220322/bc903637d6954792a9706162ee67694c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 1]: /images/20220322/2448b2de7fa5424a8c9c3218975a8699.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 2]: /images/20220322/98cc51db945f4d4288c61059272f7c7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 3]: /images/20220322/a4393825c3884c20857abcbd2da54080.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 4]: /images/20220322/b65f970470e543e09c3b20ecfc1cd9af.png
[20190128081615673.png]: /images/20220322/9039a34806b646f5bb6b805ec8c8d6c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 5]: /images/20220322/1e49b5bcbd334a749e668423c64a47ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 6]: /images/20220322/c61f83e4b8d547cabbf8eeb61360a86f.png