2017年也已經開始了快一個月的時間了，然而我卻好像沒有跨進新一年的感覺 過去的一年裡，前端開發這個行業的變化給我的感覺實在是快得有點眼花繚亂應接不暇 各種工程化工具，各種新框架占據了這個行業裡人們日常討論的話題 然而反思回自己的團隊，仍然是停留在比較基礎的開發流程。不得不讓我恍然醒悟，自己真是半年 ...
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表示將背景裁剪到內邊距里
結尾：
碎碎念的東西到這裡就先結束吧，祝全天下新年快樂
