資訊專欄INFORMATION COLUMN
摘要：使用進(jìn)行網(wǎng)易云音樂界面構(gòu)建和布局解析為什么要用進(jìn)行布局第一，布局需要清除浮動(dòng)，很麻煩。剩下的部分切出來。解決動(dòng)態(tài)的多屏幕適配問題提示動(dòng)態(tài)計(jì)算參考代碼兼容性提示
使用flex進(jìn)行網(wǎng)易云音樂界面構(gòu)建和布局解析 1.為什么要用flex進(jìn)行webapp布局
第一，float布局 需要清除浮動(dòng)，很麻煩。
第二，絕對(duì)定位需要考慮位置和空間占位
第三，元素垂直水平居中問題。
2.網(wǎng)易云音樂首頁(yè)分析 3.啥也別說，直接上代碼先來一個(gè)html,
001
別的不說咱們先用色塊把各部分堆出來，這個(gè)跟flex沒半毛錢關(guān)系，只是用了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;
}
接著往下就是重點(diǎn)了，我們來看看頭部細(xì)節(jié)細(xì)節(jié)，左右圖標(biāo)，
css部分，
#header{
align-items: center;
justify-content: space-between;
}
那中間部分三個(gè)等距怎么辦？
html,
上css,
.title {
display: flex;
justify-content: center;
}
結(jié)果如下，
最復(fù)雜的部分已經(jīng)結(jié)束了，剩下的就很OK了。
最后給大家三個(gè)小嘗試吧。
1.剩下的部分切出來。
2.解決動(dòng)態(tài)的多屏幕適配問題（提示：js+rem動(dòng)態(tài)計(jì)算）
//參考代碼：
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）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/96484.html
摘要：使用進(jìn)行網(wǎng)易云音樂界面構(gòu)建和布局解析前面我們通過布局簡(jiǎn)史與決勝未來的第四代布局技術(shù)了解了布局發(fā)展史和未來，下面，我們通過使用進(jìn)行網(wǎng)易云音樂界面構(gòu)建和布局解析了解一下，如何在實(shí)際項(xiàng)目中使用進(jìn)行布局，相信大家也體會(huì)到了它的便捷之處。 使用flex進(jìn)行網(wǎng)易云音樂界面構(gòu)建和布局解析 前面我們通過《css布局簡(jiǎn)史與決勝未來的第四代css布局技術(shù)》了解了css布局發(fā)展史和未來，下面，我們通過《使用...
摘要：基于等開發(fā)一款移動(dòng)端音樂，界面參考了安卓版的網(wǎng)易云音樂布局適配常見移動(dòng)端。圖標(biāo)使用阿里巴巴圖標(biāo)庫(kù)，中間的唱片旋轉(zhuǎn)動(dòng)畫使用了實(shí)現(xiàn)。搜索功能實(shí)現(xiàn)功能搜索歌手歌單歌曲熱門搜索數(shù)據(jù)節(jié)流上拉刷新保存搜索記錄。 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發(fā)一款移動(dòng)端音樂 WebApp，UI ...
閱讀 1170·2021-11-22 15:24
閱讀 4445·2021-09-23 11:51
閱讀 2307·2021-09-08 09:36
閱讀 3521·2019-08-30 15:43
閱讀 1301·2019-08-30 13:01
閱讀 1121·2019-08-30 12:48
閱讀 544·2019-08-29 12:52
閱讀 3372·2019-08-29 12:41
