如何用vw实现B站手机端底部的《打开app看你想看的视频？》

1、B站手机端底部有一个横条，上面显示文字：打开app，看你想看的视频。要实现的效果如下图所示：

2、实现思路：

给一个通栏的大盒子，采取固定定位的方式，position:fixed；left:0；bottom给个数值，然后给这个通栏的大盒子一个宽度，一个高度。

然后在里面套一个小盒子，这个小盒子的宽度不给，默认继承父盒子的宽度，只给个左右的margin值，给个高度，然后给个圆角，里面的文字再上下左右居中即可。

3、实现步骤：

（1）、设置一个class为app的通栏大盒子，给个宽度，给个高度，采用固定定位的方式，让这个盒子在距离底部一定的位置。

页面效果如下图所示：

2、在通栏的大盒子里边再给一个小盒子，类名为：btn-app，设置这个小盒子的高度，给个左右的margin值，宽度不用给，宽度会自动继承父元素的宽。

页面效果如下图所示：

3、给btn-app这个盒子，设置圆角，具体代码如下图所示：

页面效果如下图所示：

4、btn-app这个盒子加上文字内容以及logo图标，并且通过text-align，和line-height设置文本内容的水平居中，垂直居中，设置颜色为白色。

页面效果如下图所示：

5、最后去掉大盒子app的背景颜色，并且修改小盒子btn-app的背景颜色为#fb7299即可。也可以给这个小盒子价格阴影效果，具体代码如下图所示：

页面效果如下图所示：

4、baseSize为声明的一个基准变量：3.75vw;