网页自适应设置

    网页的自适应说白了就是宽高等随着浏览器窗体变化，那么在讲自适应前先说说设置宽高大小那点小事吧，我们通常设置网页元素是常用的单位有 px、%、em、rem。

px 像素

    由于px设置网页元素宽高，元素宽高不会随浏览器窗口大小改变，延展性很差。

    建议使用：某些特定的宽高或者属性设置，例如边框的粗细、圆角的程度。

    建议不要使用：网页中需要设置宽高的元素不要使用，除非是网站整体限定宽高（目前除了国企应该不会有这类的需求吧）。

% 百分比

    使用百分比的延展性非常好，但是要求也是因为延展性太好，导致不同浏览器窗体显示的效果差异可能区别很大，特别是高度百分比设置。

    建议使用：网页框架元素建议使用百分比设置宽度，高度使用rem，框架类的元素根据具体情况而定。

    不建议使用：要求宽高变化很小几乎不变的东西，例如边框粗细、按钮圆角很小时。

em 根据父元素字体大小确定

   em单位是根据字体大小来换算的，换算规则，如果当前元素没有设置字体大小，就从父元素中找设置字体大小的作为标准换算，因此建议不要使用em作为单位，不确定因素太多，可能你不经意的一个样式就会影响你的界面布局。看下图就明白了

body字体大小为100      

如果设置div的字体为0.5em div的宽为100*0.5*3为150px ；

不设置div的字体大小div的宽为100 * 3em = 300px；

rem 根据根元素字体大小换算大小

    rem是根据html元素的字体大小来换算大小的，例如上述结构，设置div和span的  font-size: 0.5rem;  div和span的字体都是50像素。

css3 @media 媒体查询

     @media 可以针对不同的屏幕尺寸设置不同的样式，具体写法不做多说，如果不是了解的小伙伴可以去看看 CSS3 @media 菜鸟教程 

自适应

    自适应就是@media + rem + %的使用    

    @media设置不同屏幕下html的字号，其他的元素宽高用rem和%，具体的再在相应屏幕下微调就可以达到自己想要的效果了

     

@media screen and (min-width: 320px) and (max-width: 736px){

}

当然你也可以使用js设置html的字体大小

/**
 * @ 根据不同浏览器窗口设置html字体 
 */
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 900) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 900) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);