项目：gdlt_custom_number二期收获与总结

本文主要是介绍项目：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");}         
}

这篇关于项目：gdlt_custom_number二期收获与总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---