關於wap頁面的一些總結

　　css3一些屬性

　　1.clip屬性：前景圖片也能夠用spirt啦；

　　2.calc ： wap頁面常常會遇到百分比 和 px 的計算，剛開始的解決方案是多套一層標籤，如今有calc函數計算真是挺方便的，

　　　　　　 可是！！ pc的chrome是好好的沒錯，在手機上竟然失效了，心情一會兒down了啊，持續關注中~~~~

　　3.僞類：用僞類加小圖標，> △ ......真方便~ ::before  ::after 真是好兄弟~

　　4.css3漸變gradient：有線性漸變和圓漸變 

　　5.transform-origin 可改變重心（旋點）

　　6.::-webkit-input-placeholder{color: ;} 設置placeholder的顏色

　　7.文字漸變 background-clip：text  background-gradient:(top left , #000 #999 )

　　8.代替 float:left的佈局 父級設置 display：-webkit-box  子級設置 -webkit-flex-box：1 

　　9.選擇器 很是實用，(:only-child  :empty) 內容過多，不一一列舉 

　　10.動畫 animation ，作過幾個動畫需求，內容頗多，不一一列舉，用來用去就幾個屬性，但想用好不容易 ~~~~(>_<)~~~~ 

　　　 作過的例子：

　　　 a. http://sta.ganji.com/att/project/touch/year_summary/index.html (2014趕集年終大盤點)

　　　 b.http://sta.ganji.com/att/project/touch/house-100/index.html (2015房產 100%我的房源)

　　　 ......(要學習還太多，svg，canvas等等)

　　11.line-height：1.5 和line-height：150% 實際上是不同的，line-height：150%（子元素的高度=父元素的高度*150%）

　　　 line-height：1.5 行高=字高度的1.5倍

　　12.可用outline實現外邊框  div{ border-radius:1px; box-shaow:0 0 0 5px #000;}

　　13.box-sizing:border-box;  盒子模型  忽略padding border 的大小

　　14.appearance:none 去除 表單的默認樣式

　　15. text-overflow: ellipsis  overflow:hidden  white-space:nowrap; 超過出現...

 

　　項目中遇到的兼容性問題:

　　1.安卓瀏覽器 input type="number"的placeholder失效 ，可用type="tel" 代替

　　2.安卓瀏覽器 input type="text" 的placeholder line-height 若是設置值的話 會偏上不居中，需設置 line-height:normal;

　　3.元素有動畫的不要用僞類寫，安卓部分瀏覽器不支持僞類動畫

　　4.label裏面不要有兩個input type="text" 

　　5.png24圖片壓縮有風險，通常的網上壓縮都會破壞圖片，致使iphone6或者其餘設備圖片花掉的問題

　　6.position: fixed; 困擾前端的大bug，底部橫條有fixed ，頁面又有輸入框，輸入框focus的時候，底部固定的橫條就飄到中間去~~~~~（目前尚未方法解決！）

 

　　技巧：

　　1.是否是以爲有時候排圖標很麻煩，寫background-position的時候浪費很多時間，ps切片工具備個劃分切片，

　　試試看，按方格排好icon，寫background-position的速度嗖嗖的

　　2.左邊圖片 右邊內容的佈局很多見吧，右邊內容的行數不限的時候，居中真是個麻煩，能夠設置父級 display：table ，子級：display：table-cell 再設置居中 vertical-align: middle;就能夠了。

　　以前用過這麼一坨新特性寫，一樣，PC的chrome妥妥的，到移動設備就掛了

　　.box{

　　　　min-height: 75px;
　　　　display: -webkit-flex;
　　　　display: flex;
　　　　display: -ms-flexbox;
　　　　-webkit-flex-direction: column;
　　　　flex-direction: column;
　　　　-webkit-justify-content: center;
　　　　justify-content: center;

　　}

　　佈局注意：

　　有時候一個psd包含了不少模塊，但在實際狀況中，有時候rd同窗會隱藏或者刪除一些模塊，就會致使佈局的錯亂（多一條線，兩個模塊之間沒有空隙....）,

　　切圖的時候要注意不讓這種狀況發生。

 

　　第一篇blog，有緣人看到多指點，不斷學習，不斷髮blog ~O(∩_∩)O哈哈~ 乾巴爹