這周做了一個(gè)移動(dòng)端的項(xiàng)目隔节，在開發(fā)過程中鹅经，踩到了不少坑，也學(xué)到了不少東西怎诫。在此記錄下來一些重要的東西瘾晃。
一、單位
說到移動(dòng)端刽虹，不得不提適配問題酗捌，大大小小的移動(dòng)設(shè)備不但讓做Android和ios的難過，因?yàn)樵O(shè)備大小和瀏覽器的差異涌哲，現(xiàn)在也讓前端開始頭疼了胖缤，不過，方法總是比問題多阀圾，我們是革命的隊(duì)伍哪廓，遇到問題就要上！
因?yàn)楝F(xiàn)如今市面上移動(dòng)設(shè)備的分辨率大小不同初烘，顯然咱們常用的px單位在這個(gè)時(shí)候就有些不太靈光了涡真，為此分俯，css3出了一個(gè)新單位——rem，rem是移動(dòng)端神器哆料，它完美解決了分辨率的適配問題缸剪。
rem就是相對(duì)于根元素<html>的font-size來做計(jì)算,舉個(gè)例子：
/*定義HTML根元素字體大小*/
html{
font-size: 10px;
}
/*定義子元素，采用rem作為單位*/
body{
width: 10rem; /*相當(dāng)于10*10px=100px*/
height: 10rem; /*相當(dāng)于10*10px=100px*/
font-size: 1.4rem; /*相當(dāng)于1.4*10px=14px*/
border-radius: .5rem /*相當(dāng)于0.5*10px=5px*/
}
像這樣一個(gè)寬高各100px的box就出現(xiàn)了东亦，很簡(jiǎn)單吧杏节，發(fā)現(xiàn)沒，有些像我們以前常用的em典阵，不過rem是相對(duì)于根元素(<html>)的字體大小奋渔，em相對(duì) 于父元素的字體大小。
雖然很簡(jiǎn)單壮啊，但是移動(dòng)設(shè)備那么多嫉鲸，我們又怎么根據(jù)手機(jī)屏幕的分辨率不同，去設(shè)置<html>的字體大小呢歹啼？
我知道的方法有2個(gè)：
1）通過媒體查詢
/*默認(rèn)為20px*/
html{
font-size: 20px;
}
/*判斷寬度設(shè)置不同的Html font-size值去覆蓋默認(rèn)值*/
@media only screen and (min-width: 320px) {
html{
font-size: 10px;
}
}
@media only screen and (min-width: 375px) {
html{
font-size: 16px;
}
}
@media only screen and (min-width: 414px) {
html{
font-size: 20px;
}
}
像這樣通過媒體查詢的方式玄渗，只需要把常用的屏幕寬度考慮進(jìn)去即可，能夠滿足大部分應(yīng)用場(chǎng)景染突，不過這一做法不夠嚴(yán)謹(jǐn)捻爷，處女座的你，怎么能滿足呢份企？那就用js去設(shè)置fontSize吧也榄！
2）通過js計(jì)算
//設(shè)置fontSize
var doc = document, win = window;
function initFontSize () {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
//window.innerWidth;
if (!clientWidth) return;
fontSizeRate = (clientWidth / 375);
var baseFontSize = 10 * fontSizeRate;
docEl.style.fontSize = baseFontSize + 'px';
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMcontentLoaded', recalc, false);
};
initFontSize();
通過js設(shè)備的屏幕分辨率，可以計(jì)算出相應(yīng)的字體的大小司志，這個(gè)方法可以適配所有屏幕的大小甜紫，這下就完美許多了。
二骂远、使用<meta>標(biāo)簽中的viewport布局
有了rem單位還不夠囚霸，得再加上viewport，如下：
<meta name="viewport" content="width=device-width, Initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
其中width=device-width表示設(shè)備寬度激才，也可以寫死拓型；Initial-scale=1.0表示初始化縮放； minimum-scale=1.0, maximum-scale=1.0分別表示最大和最小縮放值瘸恼；user-scalable=no表示不允許縮放劣挫。name="viewport"這個(gè)是必須要有的，有了這個(gè)<meta>標(biāo)簽东帅，頁面就有那么點(diǎn)意思了压固。
三、彈性布局盒子布局
以前PC端布局方式通常會(huì)使用float靠闭、margin帐我、padding等方式布局坎炼，這些方法不僅有繁瑣的計(jì)算，而且在移動(dòng)端還容易出錯(cuò)±辜現(xiàn)在移動(dòng)端谣光，有更好的選擇，使用flexbox布局方式矿咕。
一直以來這種布局方式都有兼容性問題抢肛，讓前端同學(xué)想用，又不敢用碳柱，究其原因也就是即分不清它各個(gè)版本的編寫規(guī)范和兼容性。值得驚喜的是熬芜，目前除了Opera mobile12莲镣，移動(dòng)端的各大瀏覽器都是支持flexbox的舊版語法的，但不包含flex的wrap屬性涎拉。所以可以大膽用瑞侮，不用太擔(dān)心。
需要注意的問題：
a) 雖然移動(dòng)端的各大瀏覽器都是支持flexbox的舊版語法的鼓拧，但是還是得有兼容性寫法;
b) 在開發(fā)的時(shí)候半火，我發(fā)現(xiàn)在使用彈性盒子模型時(shí)，如果涉及到文字的時(shí)候需要注意季俩，在li里寫上“我們”和“我們的”钮糖，分別是兩個(gè)字和三個(gè)字。會(huì)有不同的寬度而導(dǎo)致不均分酌住，解決辦法店归，如上面css所示，我設(shè)置了子元素width為5%（只有設(shè)置了li是統(tǒng)一的width就行酪我，不一定需要是5%）就可以解決這個(gè)問題消痛。
總結(jié)
移動(dòng)端布局的問題就說到這，等后端做好接口然后開始綁定數(shù)據(jù)都哭。不過移動(dòng)端開發(fā)的問題遠(yuǎn)遠(yuǎn)不止秩伞，要想做好移動(dòng)端，需要學(xué)習(xí)的還有很多欺矫。革命尚未成功纱新，同志仍需努力啊。
