2017/2/20-2017/2/26

工作总结

1. 这一周主要是写了两个landing-page 页面，两个landing-page 页面都需要做响应式，那么响应式需要涉及几个点，最主要的是布局方面，其次是移动端的手势事件处理。

技术总结

1. 移动端布局
   在最开初的时候准备使用BootStrap做响应式，但是在做第一个页面的时候，发现BS不够灵活，BS的定位应该是针对非专业前端快速搭建页面的场景。而作为一个专业前端，我觉得布局自己写，会更加灵活，自己控制起来更容易。

   • 区块宽度控制：基本模式：
     
<section class="mod mod-x">
<header></hader>
<div class="content"></div>
<footer></footer>
</section>

     有section.mod 来划分各个区块，header和content都是非必须的，但是必须有content。content的pc样式margin:0 auto;max-width:1024px;padding:10px;width：100%； 其中的max-width根据设计稿来定.
   • 布局在PC由横变为移动端纵，通过使用flex-direction来控制，在响应式布局的学习过程中，需要深入了解flex布局，阮大大的教程很不错.
   • 图片的响应式。
     
     • 最基本的一条，不让图片变形，那么就做等比例缩放，图片width为定值，height为auto，或者height定量，width为auto。
     • 图片的实现，可以通过img或者background来实现，那么什么时候选用img，什么时候选用background，还没有仔细总结出来，目前就一条：在文字不需要浮动到图片上面的时候，就都尽量别使用background，因为很有可能变形.img更好控制一点
     • 图片的压缩。因为涉及到移动端加载图片的问题，慢，是目前最主要的性能问题。

2. 手势事件。
   主要涉及到swipe和pinchIn,pinchOut事件，原生的事件操作根本就没有这两个事件，

   • 其中的swipe事件基于的是原生的touch事件，原生的touch事件，又分为touchstart，touchmove,touchend事件，所有这些事件会返回Touch对象，在Touch对象中包括了和鼠标类似的属性，例如clientX，clientY对象。
   • pinchIn和pinchOut事件基于的是原生gesture事件，原生的gesture事件，分为gestureStart，gestureMove，gestureEnd事件，这些事件对象中还含有两个特殊的属性，rotation和scale。
     比较好的一个实现了两个事件的插件库
     https://github.com/manuelstofer/pinchzoom

读书总结

《the willpower instinct》 ,其中主要是带领读者正确认识自己意志力，还没看完，希望下个月能把这本书看完。
* 除了知道自己想干什么，自己不想干什么，还要知道自己为什么想干什么。要利用这三者的关系，去解决自己的拖延症问题。