今天开始学移动端布局啦美滋滋...（就想把一些想法记录下来岂不是sixsixsix）
1、进行移动端页面编程第一步是根据设计稿的尺寸确定初始尺寸（选用适用的屏幕尺寸），方便之后根据当前屏幕尺寸进行多屏幕适配。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2、根据上面代码可以将页面宽度和屏幕宽度保持一样。当然可以用minimum-scale和maximum-scale规定缩放。但是这里有个问题是ta只适合像素比为1的屏幕，于是我就想要进行多屏幕适配啦。
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}">`) ;
那我将这两段代码写进script标签内不就每次都可以适应不同屏幕啦。（这里我使用了ES6的模版字符串而不是用‘+’）
3、接下来就涉及页面上各种元素的尺寸问题啦，用px肯定是不能适应多种屏幕的，于是我就考虑用最近很火的rem啦。但是这又要考虑px和rem之间的转换问题，我的方法是在js代码中设置html标签的fontSize，代码先贴在下面。
const oHtml = document.getElementsByTagName('html')[0];
const pageWidth = oHtml.getBoundingClientRects().width;
oHtml.style.fontSize = pageWidth / 6.4 + 'px';
这里我获取了html的宽度后除以6.4是因为我默认的设计稿宽度为640像素（iphone5屏幕），这样我除以6.4就可以设置成iphone5页面下的字体为100px，这样100px的宽度正好可以设置成1rem（注意这里最好不要让字体大小小于12px，谷歌浏览器有12px的字体限制）。
/*Less*/
@rem: 100rem;
width: 78/@rem;
height: 74/@rem;
当然也可以用less或sass，这样就不用手动用计算器计算了。（实时less转css我用的是koala）。
4、图片或背景图的尺寸最好也做一下适配，不然不同的屏幕图片大小一样很难看的哇。
