移动端初探

今天开始学移动端布局啦美滋滋...（就想把一些想法记录下来岂不是sixsixsix）

1、进行移动端页面编程第一步是根据设计稿的尺寸确定初始尺寸（选用适用的屏幕尺寸），方便之后根据当前屏幕尺寸进行多屏幕适配。

2、根据上面代码可以将页面宽度和屏幕宽度保持一样。当然可以用minimum-scale和maximum-scale规定缩放。但是这里有个问题是ta只适合像素比为1的屏幕，于是我就想要进行多屏幕适配啦。

const pixelRatio = 1 / window.devicePixelRatio;

我通过window.devicePixelRatio获取屏幕的像素比，那么再通过1除以ta岂不是就可以作为initial-scale的值啦。

document.write(``) ;

那我将这两段代码写进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、图片或背景图的尺寸最好也做一下适配，不然不同的屏幕图片大小一样很难看的哇。

以上就是我第一次接触移动端布局的想法或者说踩的坑啦，加油加油。