? ? ? ?H5項(xiàng)目怎么兼容移動(dòng)端？相信這是個(gè)每個(gè)前端開發(fā)者都會(huì)經(jīng)常百度的問題，隨著前端技術(shù)的不斷更新?lián)Q代，現(xiàn)在每個(gè)公司隨隨便便都會(huì)讓你搞一個(gè)H5項(xiàng)目出來(lái)，那么問題就來(lái)了，不管你怎么的小心翼翼，等到測(cè)試的時(shí)候總會(huì)出一些個(gè)意想不到的小Bug，每每碰到這些個(gè)問題總是讓人痛不欲生（腦子里不經(jīng)浮現(xiàn)我是誰(shuí)？我在哪？我要做什么？）
所以我就在這總結(jié)了一些經(jīng)常出現(xiàn)的問題，希望能夠幫助到你！
話不多說(shuō)，翠花，上干貨啦！
1.屏幕適配方案
說(shuō)到h5頁(yè)面，第一個(gè)想到的就是適配問題，當(dāng)然目前用的最多的就是rem,那么他的原理是什么呢？簡(jiǎn)單來(lái)說(shuō)，rem是相對(duì)于HTML根元素為基準(zhǔn)的相對(duì)單位。比如根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem;則換成px表示就是24px；如果根元素設(shè)置成font-size=1rem;則根元素?fù)Q成px就是相對(duì)于初始字體大小，一般是12px；
假設(shè)我們將屏幕平局分為10份，每一份寬度用一個(gè)a表示，即a=屏幕寬度/10;那么：
div{width: 5a} /* 屏幕寬度的50%?
但是css中沒有a這個(gè)單位??？那怎么辦呢？對(duì)，css不是有相對(duì)單位rem么？我們?nèi)梢詫?shí)現(xiàn)借助rem代替上面的a。如：
html {font-size: 12px}
div {width: 2rem} /* 24px*/
html {font-size: 16px}
div {width: 2rem} /* 32px
那么問題來(lái)了？怎么讓html元素字體大小恒等于屏幕的1/10呢？如ipone6寬是375px,font-size:37.5px;
html {fons-size: width / 10}
div {width: 5rem} /* 5rem = 5a = 屏幕寬度的50%?
我們用js很容易動(dòng)態(tài)的設(shè)置html的font-size恒等屏幕的1/10;
(function (doc, win, image_width) {
? ? var docEl = doc.documentElement, //獲取html標(biāo)簽
//orientationchange方向改變事件
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//當(dāng)前設(shè)備視口寬度
? ? var clientWidth = docEl.clientWidth;
? ? if (!clientWidth) return;
? ? docEl.style.fontSize = 100 * (clientWidth / image_width) + 'px';
};
? ? if (!doc.addEventListener) return;
? ? win.addEventListener(resizeEvt, recalc, false);
? ? doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window, //圖是多少的，這就寫多少，比如750);
那么現(xiàn)在應(yīng)該就會(huì)有小伙伴要問了，字體的font-size也可以用rem嗎？如果你非要用的話那誰(shuí)也攔不住你，但是呢其實(shí)在移動(dòng)端字體并不合適使用rem, 字體的大小和字體寬度，并不成線性關(guān)系，所以字體大小不能使用rem；由于設(shè)置了根元素字體的大小，會(huì)影響所有沒有設(shè)置字體大小的元素，因?yàn)樽煮w大小是會(huì)繼承的，難道要每個(gè)元素都顯示設(shè)置字體大??？
我們可以在body上做字體修正，比如把body字體大小設(shè)置為16px，但如果用戶自己設(shè)置了更大的字體，此時(shí)用戶的設(shè)置將失效，比如合理的方式是，將其設(shè)置為用戶的默認(rèn)字體大小:
那么如果屏幕尺寸切換了字體怎么辦呢？我們可以換種方法來(lái)實(shí)現(xiàn)
適配問題解決了，那么我們就該聊一聊彈性盒布局了，display:flex和display:box都可用于彈性布局，不同的是display:box是2009年的命名，已經(jīng)過時(shí)，用的時(shí)候需要加上前綴；display:flex是2012年之后的命名。在實(shí)際的測(cè)試中display:flex不能完全的替代display:box。display:flex的瀏覽器兼容性比較麻煩。
1.關(guān)于display:flex;
對(duì)于PC端，一般chrome（測(cè)試版本：49.0.2623.110 m）和火狐（測(cè)試版本：49.0.2）都能很好地支持。ie不支持。
對(duì)于移動(dòng)端：
（1）iOS的原生safari瀏覽器是支持的；UC瀏覽器支持的很好；微信瀏覽器不支持
（2）安卓的原生瀏覽器不支持，UC瀏覽器不支持，微信瀏覽器不支持
2.關(guān)于display:box;
PC端：chrome（測(cè)試版本：49.0.2623.110 m）和火狐（測(cè)試版本：49.0.2）都能很好地支持。ie不支持。
移動(dòng)端：
（1）iOS的原生safari瀏覽器是支持的；UC瀏覽器支持的很好
（2）安卓的原生瀏覽器支持；UC瀏覽器不支持
總的來(lái)說(shuō)，不考慮IE瀏覽器的話，PC端上使用哪個(gè)都可以，一般使用display:flex；iOS的UCdisplay:box和display:flex兩個(gè)都支持。
通常要做到兼容，寫法是下面這樣：
本來(lái)覺著好像沒多少東西，但是一寫下來(lái)就感覺有好多，不是一時(shí)半會(huì)能寫完的，后續(xù)再慢慢更新吧，今天就寫到這里了！希望能夠?qū)δ阌幸稽c(diǎn)點(diǎn)的幫助
