使用flex进行网易云音乐界面构建和布局解析（1）

xingqiba 发布于2019-08-23 10:35 / 1030人阅读

摘要：使用进行网易云音乐界面构建和布局解析为什么要用进行布局第一，布局需要清除浮动，很麻烦。剩下的部分切出来。解决动态的多屏幕适配问题提示动态计算参考代码兼容性提示

使用flex进行网易云音乐界面构建和布局解析 1.为什么要用flex进行webapp布局

第一，float布局需要清除浮动，很麻烦。

第二，绝对定位需要考虑位置和空间占位

第三，元素垂直水平居中问题。

2.网易云音乐首页分析

3.啥也别说，直接上代码

先来一个html,

别的不说咱们先用色块把各部分堆出来，这个跟flex没半毛钱关系，只是用了rem.

html{
    font-size: 100px;
}
#header{
    background-color: #d32f2f;
    min-height: 0.48rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

}
#navbar {
    position: fixed;
    top: 0.48rem;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ccc;
    min-height: 0.3rem;

}

#footer {
    height: 0.49rem;
    background: #2f2d2e;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    color: rgba(255, 255, 255, .87);
    font-size: 0.12rem;
}

.routerview {
    padding-bottom: 0.49rem;
}
.routerview {
    position: absolute;
    left: 0;
    top: 0.81rem;
    width: 100%;
    height: 2000px;
    background: #eeeeee;
}

接着往下就是重点了，我们来看看头部细节细节，左右图标，

css部分，

#header{
    align-items: center;
    justify-content: space-between;
}

那中间部分三个等距怎么办？

html,

上css,

.title {
    display: flex;
    justify-content: center;
}

结果如下，

最复杂的部分已经结束了，剩下的就很OK了。

最后给大家三个小尝试吧。

1.剩下的部分切出来。

2.解决动态的多屏幕适配问题（提示：js+rem动态计算）

//参考代码：
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = 2*document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}

3.flex兼容性（提示：postcss）

GPU云服务器云服务器网易云音乐解析 flex布局网易云音乐网易云音乐下载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96484.html

使用flex进行网易云音乐界面构建和布局解析（2）

摘要：使用进行网易云音乐界面构建和布局解析前面我们通过布局简史与决胜未来的第四代布局技术了解了布局发展史和未来，下面，我们通过使用进行网易云音乐界面构建和布局解析了解一下，如何在实际项目中使用进行布局，相信大家也体会到了它的便捷之处。使用flex进行网易云音乐界面构建和布局解析前面我们通过《css布局简史与决胜未来的第四代css布局技术》了解了css布局发展史和未来，下面，我们通过《使用...

geekzhou 2019-08-23 10:50 评论0 收藏0
Vue 实现网易云音乐 WebApp

摘要：基于等开发一款移动端音乐，界面参考了安卓版的网易云音乐布局适配常见移动端。图标使用阿里巴巴图标库，中间的唱片旋转动画使用了实现。搜索功能实现功能搜索歌手歌单歌曲热门搜索数据节流上拉刷新保存搜索记录。基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI ...

Karuru 2019-08-22 17:16 评论0 收藏0