總結一下一些知識。 1.利用CSS穿透 常見發生場景：假如我們需要通過input，type=‘file’來上傳文件，而這個input的預設樣式，可以說是非常地“不人道”。所以我們希望通過一張圖片，與這個input大小一樣，位置一致地蓋在上面。這個時候，顯然，這個時候點擊圖片，input是不會起作用的 ...
總結一下一些知識。
1.利用CSS穿透
常見發生場景：假如我們需要通過input，type=‘file’來上傳文件，而這個input的預設樣式，可以說是非常地“不人道”。所以我們希望通過一張圖片，與這個input大小一樣，位置一致地蓋在上面。這個時候，顯然，這個時候點擊圖片，input是不會起作用的。就是因為img隔絕了click的穿透，而我們希望的是，這個img只是視覺上遮擋了input的樣式，但是點擊的時候還是點擊到input。所以，只要讓img可穿透即可。 css代碼如下：img{pointer-events: none;}
2.實現自定義原生select控制項的樣式
由於select移動端原生樣式很醜，但是原生彈出效果是符合我們設計的原則。直接修改select的樣式的時候，一個奇怪的現象出現了，在chrome上調試的時候，自己定義的樣式起了作用，在Android手機上也起了作用，但是到了ios手機上就不行了，典型的不相容問題，這個時候禁用原生的樣式即可。
css代碼如下：
select{-webkit-appearance: none;}
3.文本溢出處理
移動設備相對來說頁面較小，很多時候顯示的一些信息都需要省略部分。最常見的是單行標題溢出省略，多行詳情介紹溢出省略。
css代碼如下：
//單行
.single{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
//多行
.more{
display:-webkit-box !important;
overflow:hidden;
text-overflow:ellipsis;
work-break;break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; //指定行數
}
4.300毫秒的故事
移動設備訪問的web頁面都是pc上的頁面。在預設的viewport（980px）的頁面往往都是需要“雙擊”或“捏開”放大頁面來看清頁面。而正是為了確認用戶是“雙擊”還是“單擊”。safari需要個300ms的延遲來判斷。而後來的iphone也一直沿用這樣的設計，再後來android也沿用了這樣的設計。於是，“300ms的延遲”就成了一道規範。
處理方法：
使用自定義Tap事件代替click事件。 原理：在touchstart、touchend時記錄時間、手指位置，在touchend時進行比較，如果手指位置為同一位置（或允許移動一個非常小的位移值）且時間間隔較短（一般認為是200ms），且過程中未曾觸發過touchmove，即可認為觸發了手持設備上的click，一般稱它為“tap”。
5.Tag透傳的解決方案
①.使用緩動動畫，過渡300ms的延遲。
②.中間層dom元素加入，讓中間層接受這個“穿透”事件，稍後隱藏。
③.“上下”都使用tap事件，原理上解決tap透傳事件（但不可避免原生標簽的click事件）。
④.改用Fastclick的庫。
6.開啟彈性滾動
css代碼如下：body{
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
註意：Android不支持原生的彈性滾動，但可以藉助第三方庫iScroll來實現。
7.點擊不靈敏
起因：由於使用touch觸發自定義tap事件，提速約200ms，但是touch事件對點擊區域要求更大，偶有不觸發。
解決方案：
①同時使用touchend和click觸發tap事件，如果touchend已經處理，則click不處理。
②全局捕獲click事件，如果click事件和tap事件的點擊坐標一致，且相差不到1s。則在捕獲階段阻止事件預設行為的同時取消冒泡。
8.chrome調試快捷鍵
①ctrl+shift+f 全文查找
②ctrl+o 查找文件名
③ctrl+shift+o 查找js函數名
9.彈性圖片
主要用在百分比佈局中，用一個父標簽包裹img標簽，父元素的寬度用媒體查詢來改變。
css代碼如下：
img{
max-width:100%;
}
10.一像素邊框設置
很多時候，想保持邊框的大小在任何設置上都是1px，但是因為1px使用2dp渲染，也就是說會顯示為2px大小。所以，要採用css3縮放一下。
css代碼如下：
.folder li{
position:relative;
padding:5px;
}
.folder li+li:before{
position:absolute;
top:-1px;
left:0;
content:' ';
width:100%;
height:1px;
border-top:1px solid #ccc;
-webkit-transform:scaleY(0.5);
}
努力學習。。。
