标签：找工作 数组 height 保存 方案 break 单元 ++ query
1.首页：添加背景图
2.项目经验：分几个部分进行展示
小游戏、论坛、插件、css3、vue、jQuery mobile、todolist
3.前端技能
4.个人经历
5.左侧信息栏
js部分：
滚轮事件和键盘事件
参考：http://www.ydcss.com/archives/516
WebKit内核，Trident内核 => mousewheel
1、mousewheel
IE6首先实现了mousewheel事件。此后，Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向上还是向下），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到document（IE8）或window（IE9、Opera、Chrome及Safari）对象。与mousewheel事件对应的event对象包含鼠标事件的所有标准信息外，还包含一个特殊的wheelDelta属性。当用户向上滚动鼠标滚轮时，wheelDelta是120的倍数；当用户向下滚动鼠标滚轮时，wheelDelta是-120的倍数。
2、DOMMouseScroll
Firefox支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚轮滚动时触发。与mousewheel事件一样，DOMMouseScroll也被视为鼠标事件，因而包含于鼠标事件有关的所有属性。而有关鼠标滚轮的信息则保存在detail属性中，当向上滚动鼠标滚轮时，这个属性的值是-3的倍数，当向下滚动鼠标滚轮时，这个属性的值是3的倍数。火狐内核FireFox浏览器的方向判断的数值的正负与其他浏览器是相反的。FireFox浏览器向下滚动是正值，而其他浏览器是负值。
function() { $(document).on("mousewheel keydown DOMMouseScroll", function(t) { /*t是传进去的event对象，里面包含wheelDelta等属性，滚轮向上滑其值为120，向下为-120*/ console.log(‘t‘,t); if (!e()) { t = t || window.event; var n = t.wheelDelta || -t.detail; 0 > n || 40 == t.keyCode ? 3 >= s && s++:(n > 0 || 38 == t.keyCode) && s >= 1 && s--, o() } }) } (),
touch事件
参考：http://www.cnblogs.com/yanxuan/p/6160630.html
在移动端页面开发时，常常会用到touch事件，比如左滑右滑的轮播等。常用的触摸事件有touchstart,touchmove,touchend。
每个事件包含下面三个用于跟踪虎摸的属性：
touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个touch事件包含下面的属性：
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触摸的DOM节点目标
css部分
当屏幕宽度小于768px时，调整元素宽高和字体大小的方法
参考网易的做法：http://www.cnblogs.com/lyzg/p/4877277.html
deviceWidth通过document.documentElement.clientWidth就能取到了，所以当页面的dom ready后，做的第一件事情就是：
（1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度（在我的项目中取iPhone7 plus的宽度414/100=4.14）：
如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem
（2）布局时，设计图标注的尺寸除以100得到css中的尺寸
某元素高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取一个100作为参照，就是为了这里计算rem的方便！
（3）在dom ready以后，通过以下代码设置html的font-size:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + ‘px‘;
补充说明：采用该方法，视口要如下设置
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
根据该方法写出了适用于个人主页的移动端适配方案：
<script type="text/javascript">/*根据js监控页面的窗口大小 然后响应改变所有 font-size的大小*/ (function () { function remSize() { let sw = document.documentElement.clientWidth; document.documentElement.style.fontSize = Math.floor(sw / 4.14) + ‘px‘; /*4.14，设计稿的横向分辨率（iPhone7 plus）414/100得来*/ } window.onresize = remSize;/*onresize 事件会在窗口或框架被调整大小时发生*/ window.onload = remSize; window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () { let sw = document.documentElement.clientWidth; var angle = window.screen.orientation.angle || window.orientation; if (sw < 769 && (angle === 90 || angle === -90)) { alert("竖屏浏览体验更佳，亦可使用PC"); } });/*移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机旋转角度*/ })(); </script>
第二页-项目经验
实现每个project中img、txt、btn等高对齐，因为设置了display:table-cell，所以它们三个只要有一个高度发生变化，其余两个会一起变化，添加display:table-cell之后，子div在父div中实现了垂直居中效果，不过需要注意的是，在IE6和 IE7这样低版本的浏览器中无效。display:table-cell的作用，它可以指定对象作为表格单元格，类同于html标签<td>，也就是说它可以使对象具有表格单元格的属性，添加了display:table-cell属性之后，div 就具有了align属性，于是vertical-align:middle也就生效了，可以实现垂直居中。
.page2 .project { display: table; /*此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。*/ height: 100px; width: 450px; background: #fff; border: 1px solid #eee; box-shadow: 1px 3px 3px 0 #b9b9b9; border-radius: 2px; opacity: 0; cursor: pointer; box-sizing: border-box; padding: 5px } .page2 .project .pro-img { display: table-cell; /*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/ vertical-align: middle } .page2 .project .pro-txt { display: table-cell; text-align: left; padding: 0 10px } .page2 .project .pro-btn { display: table-cell; vertical-align: middle }
第四页-个人经历
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于：
1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
line-height:2;行高是2倍的文字大小，均以相应的字体为基准。
display:list-item为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。其效果就和ul中出现项目列表符号一样。通俗地说就是会在内容前面自动加上黑点，而display:block则不会出现黑点。
.page4 .history .intro>dd { display: list-item; /*此元素会作为列表显示。*/ list-style-type: circle /*空心圆*/ }
标签：找工作 数组 height 保存 方案 break 单元 ++ query
原文地址：http://www.cnblogs.com/yujihang/p/6935065.html
