项目:gdlt_custom_number二期收获与总结
来源:互联网 发布:鼎泰物业管理源码 编辑:程序博客网 时间:2024/05/17 01:38
先说一下感想吧,这次的项目我是用响应式布局,一套代码,二种设备(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>
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二期收获与总结
- 项目:gdlt_custom_number 总结收获和经验
- 项目收获小总结
- 软第一期项目心得与总结
- 项目:手机网民监测网站的收获与总结
- [29期] 项目总结
- [29期] 项目总结
- [32期] 项目总结
- [29期] 职业生涯第一个项目的总结与体会。
- 李宁项目收获二(servlet)
- 总结一下 第一个项目中的 收获与心得 第一篇 ASIHTTP
- [27期] 电子商城项目总结
- 总结做完第一期项目
- c++ 编译期与运行期 总结
- c++ 编译期与运行期总结
- c++ 编译期与运行期总结
- PHP源码学习中的收获与总结
- 记录每天的收获与总结
- nfs服务器的安装与配置
- hdu1042N!(大数)
- 面向对象编程
- android圆角按钮
- Android Canvas使用
- 项目:gdlt_custom_number二期收获与总结
- java枚举类模板
- 健康生活、快乐工作
- 马良建模学习笔记——软包制作七、八
- 计算机领域顶级会议
- wait和waitpid函数
- 项目3 -- 单链表的应用(2)
- django的FormView实例一则
- Json解析 Json数据文件 例子