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