移动端开发-响应式布局

       响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，当然响应式布局理论上应该是pc端和移动端都是可以的，不过在实际的操作中因为移动端的开发有时候要针对不同的终端，下面我就针对移动端的开发对移动端页面的响应式开发的步骤和原理做下简单的总结。

       我们再做移动端开发的时候在布局的选择上，比如弹性布局，百分比布局，流式布局，固定布局等，当然我个人感觉目前比较比较常用的是rem布局，下面我也是主要针对这个做下介绍和总结。

一：头部引入 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,maximum-scale=1, user-scalable=no">

上述代码主要为了兼容移动端的展示效果，具体的参数意义不过多解释，因为关于这个的解释很多，大家可以自己搜集下资料。

二：头部引入 <meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">

上述代码主要是为了让IE文档模式永远是最新的

三：头部引入 （1）<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script></script><![endif]-->

                 或者（2）http://www.bootcdn.cn/respond.js/ 点击打开链接里面下载respond.js文件，然后引入

                 或者（3）modernizr.min.js 方法

上述代码主要为了下面我要介绍的媒体查询做准备，兼容IE8以下的浏览器，上面的代码的主要含义是：

（1）<!--[if lt IE 9]><![endif]-->之所以把引用写在他的里面主要是为了提高下载速度，此标记除了IE8以下其他浏览器并不识别而里面引用的代码第一行作用是：在IE6,IE7，IE8这些老的浏览器中，他们是不支持html5的标签。引入这样一个库就会让老的浏览    器支持这些标签。第二行的作用respong.js，而Respond是一个很有名的polyfill因为IE6-8不支持CSS3的媒体查询。

（2）这个是直接去下载文件，然后引用的方法，当然respong.js和respong.min.js都是可以的，也是利用respong的方法

         特别声明：①引用的顺序不能乱，媒体查询需要写在外部的css文件里面，内联的是不生效的

                             ②css文件的引入方式必须要在respong的前面，不然也是不生效的

（3）modernizr是一个JS库--可以理解为是一个检测程序，会检测浏览器对CSS3、HTML5等等的一些功能性的支持情况，如果浏览器支持某个属性或者某个特性那么它就会向HTML元素添加相应的类，如果不支持他就会添加一个no开头的同名的一个类。这种方法 使用起来相对麻烦，不建议使用。

四：合理使用媒体查询和rem，这个也是整个响应式布局最关键的部分，这个主要有两种方法，css3的媒体查询和js实现自适应

（1）媒体查询，建立一个css文件，里面可以设置一些初始值，比如a标签，li属性，input属性，初始文字大小等，媒体查询需要写在这个css文件里面，具体的自己根据项目需要去设置，我下面引用的只设置rem和像素的比例值和元素的最小宽度，并且在项目头部引用。

html{ font-size: 312.5%;min-width:6.4rem;}
/*iphone*/
@media screen and (min-width:320px){
html{font-size:312.5%;}
}
@media screen and (min-width:375px){
html{font-size:366.2%;}
}
@media screen and (min-width:414px){
html{font-size:404.2%;}
}
/*安卓*/
@media screen and (min-width:360px){
html{font-size: 351.5%;}
}
@media screen and (min-width:400px){
html{font-size: 390.6%;}
}
@media screen and (min-width:640px){
html{font-size: 624.8%;}
}
@media screen and (min-width:768px){
html{font-size: 749.8%;}
}

上面代码主要是为了兼容不同的终端：

①关于html{ font-size: 312.5%;min-width:6.4rem;}是为了设置rem和像素的比例，我此处设置的是1rem=50px，原理：在做项目的时候浏览器默认的是1rem=16px，当然这个不是固定的，可以根据自己的需要和喜好去设定:

比如html{ font-size: 312.5%;}，1rem=50px ； html{ font-size:62.5%;} 1rem=10px等，但是个人认为最好设置1rem=12px以上的比例，因为经过研究发现，不知道什么时候开始，小于 12px 或者 75% 的字体大小 rem 确实不支持这种换算，这可能与现在有些浏览器不支持 12px 以下的大小有关。具体的设置方法我这里整理了一下，比如321.5%将这个值设为x，我们在计算的时候16*x/100=y，后面的这个y就是需要考虑的，比如1rem=10px，此时y=10*10,x=0.625, 换成百分比就是62.5%；同理比如1rem=50px此时y=50*100,x=3.125, 换成百分比就是312.5%，具体的比例自己根据喜好自己设置（最好比例在12px以上）。

②另外可以看下html{ font-size: 312.5%;min-width:6.4rem;}，另外设置了min-width:6.4rem;也就是说我这个媒体查询和rem的设置是只针对320px（iphone5）以上尺寸的屏幕的（因为目前小于这个尺寸的终端很少存在，所以将最小值设置这个尺寸，如果需要设置其他的尺寸自己通过媒体查询修改比例即可），只有当元素大于6.4rem，也就是320px才是生效的，接下来大家可以看下有设置了很多屏幕尺寸的，下面设置的屏幕尺寸也就是各个终端的屏幕尺寸，比如iphone6，iphone7和安卓以及平板的尺寸，比如当屏幕尺寸在375px（iphone6）的时候，此处修改媒体查询，重新计算比例，但他达到375px的时候使用此时的值，以此类推414px等，此处计算方法我举个例子：当屏幕是320px的时候，比例是312.5%，而当屏幕是37px的时候，应该是多少呢，这个应该是很好算的，我们把这个值设为x，所以320/375=312.5%/x；很好算x=366.2%；下面的也是同理，所以说我们只需知道屏幕尺寸就可以适配他的值，关于屏幕尺寸自己可以查下资料，应该都能准确的找到。

（2）js适配这个方法并不是唯一的，屏幕都是以640px为标准的（因为移动端页面目前ui给的设计图一般都是这个的，如果是750的自己改下就行）我这边列举两个

  ①：(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

注意看里面的640，如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640) ，此时设置的1rem=100px，和刚刚媒体查询的1rem=50px并不一样，当然这个也是可以设置的，比如1rem=50px，需要docEl.style.fontSize = '50px';   docEl.style.fontSize = 50 * (clientWidth / 640) + 'px';

②html{font-size：312.5%}或者html{font-size：50px}

!(function(win, doc){
    function setFontSize() {
        // 获取window 宽度
        var winWidth =  window.innerWidth;
        // 640宽度以上进行限制 需要css进行配合
        var size = (winWidth / 640) * 100;
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
    } 
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';   
    var timer = null;
    win.addEventListener(evt, function () {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 300);
    }, false); 
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
    // 初始化
    setFontSize();
}(window, document));

注意看里面的640，另外还有开头设置的默认值。
总结：目前，随着移动应用市场的不断扩大，移动开发的市场得到长足的发展，并且在整个开发的比重中也占着越来越重要的地位，在整个开发中适应各个终端是必不可少的，当然方法也是有很多种的，比如利BootStrap等相关框架，或者利用百分比进行开发，我这边根据我目前做的项目还有一些之前前辈的经验主要总结了这些，相信在以后的开发中一定会有更加好用的方法。