html界面嵌入网易云,使用flex进行网易云音乐界面构建和布局解析（1）
使用flex進行網易云音樂界面構建和布局解析
1.為什么要用flex進行webapp布局
第一，float布局 需要清除浮動，很麻煩。
第二，絕對定位需要考慮位置和空間占位
第三，元素垂直水平居中問題。
2.網易云音樂首頁分析
3.啥也別說，直接上代碼
先來一個html,
001別的不說咱們先用色塊把各部分堆出來，這個跟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)
總結
以上是生活随笔為你收集整理的html界面嵌入网易云,使用flex进行网易云音乐界面构建和布局解析（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leetcode#832. Flippi
- 下一篇： 腾讯与微软合作，准备应用Silverli