今天開始學(xué)移動端布局啦美滋滋...（就想把一些想法記錄下來豈不是sixsixsix）
1、進(jìn)行移動端頁面編程第一步是根據(jù)設(shè)計稿的尺寸確定初始尺寸（選用適用的屏幕尺寸），方便之后根據(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ī)定縮放。但是這里有個問題是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是因為我默認(rèn)的設(shè)計稿寬度為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，這樣就不用手動用計算器計算了。（實(shí)時less轉(zhuǎn)css我用的是koala）。
4、圖片或背景圖的尺寸最好也做一下適配，不然不同的屏幕圖片大小一樣很難看的哇。
