今天開始學(xué)移動端布局啦美滋滋...（就想把一些想法記錄下來豈不是sixsixsix）
1赏淌、進(jìn)行移動端頁面編程第一步是根據(jù)設(shè)計(jì)稿的尺寸確定初始尺寸（選用適用的屏幕尺寸）婉称，方便之后根據(jù)當(dāng)前屏幕尺寸進(jìn)行多屏幕適配坷襟。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2彬碱、根據(jù)上面代碼可以將頁面寬度和屏幕寬度保持一樣。當(dāng)然可以用minimum-scale和maximum-scale規(guī)定縮放常柄。但是這里有個(gè)問題是ta只適合像素比為1的屏幕，于是我就想要進(jìn)行多屏幕適配啦搀擂。
const pixelRatio = 1 / window.devicePixelRatio;
我通過window.devicePixelRatio獲取屏幕的像素比西潘，那么再通過1除以ta豈不是就可以作為initial-scale的值啦。
document.write(`<meta name="viewport" content="width=device-width, initial-scale=${pixelRatio}, minimum-scale=${pixelRatio}, maximum-scale=${pixelRatio}">`) ;
那我將這兩段代碼寫進(jìn)script標(biāo)簽內(nèi)不就每次都可以適應(yīng)不同屏幕啦哨颂。（這里我使用了ES6的模版字符串而不是用‘+’）
3喷市、接下來就涉及頁面上各種元素的尺寸問題啦，用px肯定是不能適應(yīng)多種屏幕的威恼，于是我就考慮用最近很火的rem啦品姓。但是這又要考慮px和rem之間的轉(zhuǎn)換問題寝并，我的方法是在js代碼中設(shè)置html標(biāo)簽的fontSize，代碼先貼在下面腹备。
const oHtml = document.getElementsByTagName('html')[0];
const pageWidth = oHtml.getBoundingClientRects().width;
oHtml.style.fontSize = pageWidth / 6.4 + 'px';
這里我獲取了html的寬度后除以6.4是因?yàn)槲夷J(rèn)的設(shè)計(jì)稿寬度為640像素（iphone5屏幕）衬潦，這樣我除以6.4就可以設(shè)置成iphone5頁面下的字體為100px，這樣100px的寬度正好可以設(shè)置成1rem（注意這里最好不要讓字體大小小于12px植酥，谷歌瀏覽器有12px的字體限制）镀岛。
/*Less*/
@rem: 100rem;
width: 78/@rem;
height: 74/@rem;
當(dāng)然也可以用less或sass，這樣就不用手動用計(jì)算器計(jì)算了友驮。（實(shí)時(shí)less轉(zhuǎn)css我用的是koala）漂羊。
4、圖片或背景圖的尺寸最好也做一下適配卸留，不然不同的屏幕圖片大小一樣很難看的哇走越。
