移动端rem适配屏幕

1、px、pt、em、rem 的区别

px(pixel)
像素，是屏幕上显示数据的最基本的点，表示相对大小(不同分辨率上px显示不同)

pt(point)
印刷行业常用的单位(磅)，等于1/72英寸，表示绝对长度

em
em是相对长度单位，基于父级元素的font-size计算字体大小。
如果未设置父级字体大小，则相对浏览器默认字体尺寸16px（1em = 16px）：10px=0.625em，
为了简化换算，在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 10px=1em

rem （root em）
与em的区别在于，它是相对于html根元素的。(在body标签里面设置字体大小不起作用)
既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应rem布局: 
通过html上的字体大小控制页面上所有的rem单位的尺寸
换算:预设一个基准值100px,基于640px设计稿的尺寸，你想适配320px的，现在的基准值:
                320px/640px*100px=50px

2、为什么用rem适配

　　由于移动端的屏幕众多，就拿iphone来说，iphone5、iphone6、iphone6+分别是320px、375px、414px…Android机的分辨率更是百花齐放…面对这么多的屏幕，px显然不能轻易去适配了，比如设置div的padding-left为10px时，iphone5中比例和设计稿一致，但iphone6+则显得有点“瘦”了，因此我们要想着去适配不同屏幕的手机，让设计稿在分辨率相差很大的手机上显示的效果也要一样。

早期的适配用百分比+媒介查询写很多类型的css代码，这时候的代码量很大，适配效果也不是很好，毕竟机型太多…这时候rem的优势就充分展示出来了…不同分辨率的屏幕，通过动态设置rem的值（即根元素的字体大小），就能实现等比例缩放的效果。

3、怎么用rem

第一：设置视口

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

第二：在dom ready以后，通过以下代码设置html的font-size:

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + ‘px‘;  // 6.4是根据设计稿/100 算出来的 具体值由设计稿定

三,我们也可以使用less来进行计算.在不同的浏览器宽度时,给html赋予不同的默认字体大小,且字体大小与屏幕宽度的比例是一样的.如下:

(为了配合谷歌浏览器最小字体为12px;所以我们把最窄的屏幕宽度320对应的字体大小设为12px; )

1  @media screen and (min-width:320px){html{font-size:12px;}}
2  @media screen and (min-width:346px){html{font-size:13px;}}
3  @media screen and (min-width:352px){html{font-size:14px;}}
4  @media screen and (min-width:400px){html{font-size:15px;}}
5  @media screen and (min-width:480px){html{font-size:18px;}}
6  @media screen and (min-width:560px){html{font-size:21px;}}
7  @media screen and (min-width:640px){html{font-size:24px;}}

另外就是,我们平时切图,可能要按照比例来,例如640宽的设计图,我们的字体大小,行高之类的,可能就取设计稿大小的一半.
这在320px宽的屏幕中显示是非常正常的. 但在稍微宽一点的屏幕里, 整个页面跟设计稿比起来就相对比较扁了..
(我想过一个wap布局的办法,就是按照设计图的大小,把页面设计出来,然后通过zoom来改变缩放比例,达到宽度100%的效果,貌似大家都不提倡这样,谁能告诉我原因?)
为了能根据设计图,通过很少的计算就能布局,我们用less,计算出一个10px大小的值,我们命名为rex;

1 @rex : 5rem/12; /* 640的设计图时: 5rem/12; 750的设计图时: 16rem/45 */ 

然后这个@rex我们就可以按照设计图的尺寸,当它是10px来使用.(可以省去很多的计算)

例如在640宽的设计图里, 有一行字体大小为36px; 行高为100px的字.我们就可以写成

 1 .txt{font-size:3.6*@rex; line-height:10*@rex;} 

这样一来,在各个宽度下看的样子都几乎是一样的,不会有被"压扁"的现象存在.