项目：gdlt_custom_number二期收获与总结

先说一下感想吧，这次的项目我是用响应式布局，一套代码，二种设备（PC、MOBILE），通过CSS3 的 media query，一套代码运行在两种设备上效率着实很高,但这样写的话，兼容性在PC端的IE8-下就没用了。

1.使用rem作为基本单位

使用rem作为基本单位真的很方便。如果要让一些div的高度随着移动设备的宽度改变的话，就直接以rem为基本单位，但前提是通过JS来设置html的font-size。在这次项目中我是这么设置的：

<script>
    var dde = document.documentElement,
        dde_width = dde.clientWidth;
    if(dde_width < 1003){ 
      dde.style.fontSize = dde_width * 10 / 32 + 'px';  //①
    }else {
      dde.style.fontSize = 150 + 'px';
    }   
  </script>

为什么dde_width < 1003呢，这个看你自己怎么调整。①的设置是因为我要设置html的font-size为100px（基于320px的iphone 4），刚开始设置为10px，但后来发现以webkit为显示引擎的浏览器的默认最小font-size是12px，结果就gg了，而且-webkit-text-size-adjust: none这行代码在新chrome浏览器早就没用了。

还有上面代码放在body末尾的script外部代码，在uc移动浏览器会有个bug，你必须放在head头部上才会生效。研究了很久，发现，比如，你在js代码上设置html的font-size为100px的话，那些在head头部上css外部文件的以rem为基本单位还有以浏览器默认的16px为基准。即使你设置这些代码在DomContentLoaded事件中执行也是一样。

2.在页面这行代码所在区域触发的click事件中target是里面的img

<a class="hammer" data-id="1">
        <img src="img/hammer.png">
      </a>

3.①要让图片作为背景占据整个移动端屏幕的话，就设置

background-size: 100% auto;

②弹出窗口要是positon：fixed，里面的div为position：absolute的话，一定记得考虑各个设备的分辨率或者宽度，不然以后要调烦死你,也就是在PC端固定宽度才是王道啊

4.移动端弹出窗口禁止滚动的方法，就是在进行弹出窗口上设置touchmove事件时取消默认就可以了

function preventScroll(id){
	id.addEventListener("touchmove",function(e){
		  e.preventDefault();
	},false)
}

id为某一个对象

5.①用原生JS的XHR时，即使后台返回的是JSON，那么也得对返回结果进行JSON转换，JSON.parse(result)

②另外在用原生JS的XHR时，与后台交互的URL和用JQuery的AJAX时也是有区别的。本地测试，在用JQuery的AJAX时，URL直接写url="addUser"就可以了，而原生JS的XHR的url="/custom_number2/addUser"。不过这种在挂到服务器上就都写成url="addUser"就可以了，此为与JAVA后台交互的url

function submitData(type,url,callback,dataString){
    var xhr = new XMLHttpRequest();
    if(xhr != null){
      xhr.onreadystatechange = function(event){
        if (xhr.readyState == 4){
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                callback(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            }
        }
      };
      
      if(type.toLowerCase() == "post"){
        xhr.open("post", url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(dataString);
      }else if(type.toLowerCase() == "get"){
        xhr.open("get", url, true);
        xhr.send(null);
      }
    }else {
      alert("Your browser doesn't support XMLHTTP");
    }         
}