移动开发学习日志：第四天精彩内容

参照iphone678设置vw vh.

一般开发中都习惯用vm单位。

酷我音乐-准备工作

设置了css生成位置/定义了vm变量/引入了base.less。

在没有设计稿的时候选择在iphone678下打开该网页，即可照搬。

效果如下

酷我音乐——搜索区域

<!-- 搜索区域 -->

<div class="search">

<div class="txt">

<span class="iconfont icon-sousuo"></span>

<span>搜索你想听的歌曲</span>

</div>

</div>

效果如下

banner区域

点检查元素，发现左右padding.

小技巧，让图片铺满不变形

// cover完全覆盖

// 缩放img，图片比例跟父级盒子比例不同，避免图片挤压变形

object-fit: cover;

酷我音乐-标题公共样式

右键检查，发现title的下边距

更多没有居中，使用了line-height: (25 / @vw);才能居中

效果如下

酷我音乐-排行榜内容

效果如下

推荐歌单区域

效果如下

下载

效果如下

头部固定

效果如下