微信小程序胶囊按钮的大小问题

记录一段神坑
最近在做一个天气的小程序，在左边需要自定义一个设置按钮，冥思苦想也没找到不破坏风格的写法，于是乎，就把邪恶的小手伸向了右边的胶囊按钮，令我万万没想到的是...

小程序的官方文档给我们挖了一个大坑！

不多说，上文档  微信小程序设计指南
 

Android

 

iOS

 
然后作为老实人的我就按文档写了样式，发现怎么调怎么不对
好吧，作为一枚前端，必须要有自己的设计追求！
于是我就手动调了按钮，半小时之后总算满意了。

.capsule {
  width: 70px;
  border: 1px solid hsla(0, 0%, 100%, 0.25);
  border-radius: 27px;
  background: hsla(0, 0%, 100%, 0.6);
  line-height: 1;
  position: absolute;
  left: 7pt;
  top: 24px;     /*iOS*/
  top: 30px;     /*Android*/
}

.capsule, .capsule>text {
  display: flex;
  align-items: center;
}

.capsule>text {
  flex: 1;
  height: 30px;
  justify-content: center;
}

你可以分析理解一下这段代码。其他的话我就不多说了...
反正你叫我雷锋就好了...
 
文章最后，硬广一波最近写的这个天气小程序
草创之初，还有诸多不完善的地方，还请各位批评指正！

iTools工具箱