适配知识点

em和rem的使用

避免px单位的使用是个很重要的一点。这里用em和rem来代替px。

• em：根据父标签的字体大小来设置当前标签的宽高或字体大小。如：

<div id=”a”>
<div id=”b”></div>
</div>

如果给b设置字体大小为0.5em，则b的字体大小将会是a的一半。但是本人并不推荐大量使用em，因为这会让你的计算变得困难。试想，当多层嵌套时都使用em那最里面的字体将是最外层标签字体的几分之几呢？

• rem：根据跟标签的字体大小来适配当前标签的宽高或字体大小。

这个单位推荐使用，所谓的跟标签，对于html代码来说，自然就是最外层的标签了。不管自己的html代码有多少层的嵌套rem单位总是根据标签字体来计算。

绝对适配方案

在QQ邮箱中，当屏幕很小的时候QQ邮箱的字体就很小，当浏览器不断的拖大的过程中字体就好跟着慢慢变大。这种适配方案是在采用rem作为大小单位的同时通过JS根据屏幕大小计算出一个合适的数值赋值给当前的html即可。
在onLoad的时候执行下面的jQuery代码（后面的20根据自己的需要来改）

    var fontSize = $(window).width()/20;//屏幕的宽
        $("html").css("font-size",fontSize +"px");

纯JS代码可以这样写：

var fontSize = document.body.clientWidth
var htmlElement = document.getElementsByTagName("html")[0];
htmlElement.style.fontSize=fontSize+”px”;

其实不难看出，就是拿当前的屏幕尺寸去除一个数值，得到字体大小，进而将这个字体大小赋值给heml跟节点（跟标签）即可，然后全文设置字体大小或控件大小时使用rem作为单位。也可以配合百分比设置控件大小。这样一来基本上可以根据屏幕尺寸完美缩放自己的界面了。

Media Queries

在CSS中写下不同屏幕下使用不同的CSS来实现屏幕适配，这个方式不但可以进行字体的适配还能实现不同界面显示不同的样式：
- CSS中根据要求写不同的屏幕范围，如下:

@media screen and (min-width: 240px) and(max-width:319px){
    html {font-size: 10px; }
}

• HTML代码头部添加下面一段：

<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1.0,user-scalable=no;" />