2017年也已经开始了快一个月的时间了，然而我却好像没有跨进新一年的感觉

过去的一年里，前端开发这个行业的变化给我的感觉实在是快得有点眼花缭乱应接不暇

各种工程化工具，各种新框架占据了这个行业里人们日常讨论的话题

然而反思回自己的团队，仍然是停留在比较基础的开发流程。不得不让我恍然醒悟，自己真是半年的经验凑合用了两年。

所以选择在这样一个时间，记录下自己的这半年经验，做为一个分隔线，让自己突破现在的状态。

移动开发篇：

最先接触的移动端自适应的做法，大概是手淘家的flexible.js

具体做法就是通过控制html根元素的font-size值搭配rem单位来实现的适应。有个值得注意的地方是flexible还通过动态生成meta标签来改变viewport缩放，实现对iphone系列的高度自适应（语文不好真不知道怎么形容），达到一个在Retina屏幕下页面显示质量也不会受太大影响

后来刷论坛的时候，接触到了一些其他大神的做法，比如我现在也在使用的通过calc属性来改变html的font-size值来实现的适应,搭配媒体查询来实现一些低版本浏览器的兼容，毕竟布局本来就是html和css的职责，能不用js来实现就尽量不用

flex布局：

flex在移动端上确实非常好用，基本可以代替float和定位，垂直居中也比以往的display-table来的方便。

唯一要注意的就是flex有一个早期版本的兼容写法

现在的语法：

/*父容器*/
    .box{                                        
        display:-webkit-flex;
        
        display:flex;
        
        /*行内元素也可也用flex*/
        display: inline-flex;
    }
    /*父容器样式*/
    .box{
        /*主轴方向*/
        flex-direction:row; /*row：从左到右   column：从上到下*/
        
        /*主轴对齐*/
        justify-content:center;/*flex-start：左对齐  flex-end：右对齐   space-between：两端对齐*/
        
        /*交叉轴对齐*/
        align-items:center;/*flex-start：顶部对齐  flex-end：底部对齐*/
    }
    /*子元素*/
    .item{
        /*排序*/
        order:0; /*数值越小排越前*/
        
        /*元素放大比例，0表示不放大*/
        flex-grow:0;
        
        /*元素缩小比例,0表示不缩小*/
        flex-shrink:1; 
        
        /*固定大小*/
        flex-basis: 1;
    
           /*综合上面三种的简写,默认值0 1 auto*/
        flex:xx;
    }

View Code

旧版本兼容语法：（发现有兼容问题可以尝试加上此兼容写法）

/*父容器*/
    .box{                                        
        display:-webkit-box;
        display:box;
    }
    /*父容器样式*/
    .box{
        /*排列方式*/
        box-orient:horizontal; /*horizontal：水平方向   vertical：垂直*/
        
        /*方向*/
        box-direction:normal; /*normal：默认方向   reverse：反方向*/
        
        /*主轴对齐*/
        box-pack:center;/*start：左对齐  end：右对齐   justify：两端对齐*/
        
        /*交叉轴对齐*/
        box-align:center;/*start：顶部对齐  end：底部对齐*/
    }
    /*子元素*/
    .item{
        /*排序*/
        box-ordinal-group:0; /*数值越小排越前*/

        box-flex:xx;
    }

View Code

移动端踩坑系列：

click延迟：

说起移动端上的坑，估计第一个都会想到click的延迟，由于我们的采用的框架是zepto，所以可以用tap事件来提高点击体验。

早期的zepto上的tap事件还有一个"点透"的问题，可以通过采用类似loading弹出层的方式来阻止后发的click事件作用到我们的目标页面。不过最新版本的zepto已经解决这个问题，可以放心引用。

目前所知解决延迟的方式还有fastclick.js；如果什么插件库都不想引用的话，可以尝试使用loading弹层的方式来减少用户的延迟感

元素点击响应的默认边框和触摸遮罩：

-webkit-tap-highlight-color:transparent; 可以将触摸的遮罩颜色透明化，当然也可而已设置为其他颜色

按钮点击的active效果：

移动端上的hover和active事件都是无效的，可以给该元素绑定一个空的touchstart的空事件，可以激活active效果

也可以通过touchstart和touchend来增减类名，不过在性能比较差的机子上会出现长按释放后样式一直存在的问题

获取元素最终应用到的样式：

前面说过通过改变根元素的font-size值搭配rem单位来做适配的方法，这个时候就需要准确的获取根元素的font-size值

而element.sytle.fontSize是取不到样式表上的属性值的，要去到样式表上的应用的样式，必须用getComputedStyle。

border-radius的背景色溢出：

一些旧版本的系统或浏览器会出现当border-radius和背景色同时存在的时候，圆角以外的部分也会有背景色溢出

此时可以加上 background-clip:padding-box 来修复

background-clip规定了背景的绘制区域，padding-box表示将背景裁剪到内边距里

结尾：

碎碎念的东西到这里就先结束吧，祝全天下新年快乐

年初随笔